Video

Introduction to Dynamic Background Images in Typebot

Create dynamic background images and videos in Typebot with Callbacks. This feature allows you to take your Typebots to a whole new level by incorporating images or videos that change based on user input. It’s a fantastic way to make your Typebot more engaging and interactive.

You know what’s even better? I’ve got an amazing reference for you to get started. Simone’s video on using Typebot callbacks is a goldmine of inspiration. So, if you haven’t checked it out yet, I highly recommend giving it a watch. Simone’s insights motivated me to explore how to make Typebots even more dynamic based on user interaction. So, let’s jump right in!

Creating Dynamic Background Images

When it comes to creating dynamic background images in Typebot, I’ve come up with my own unique twist. Along with using videos, I also used regular images with a Ken Burns effect. This effect adds subtle animations to the images, giving your Typebot that extra spark.

Let me take you through an example to explain how this works. Imagine you have a customer feedback survey. You ask the guest, “How did your stay at Beach Retreat compare to your expectations?” If the user responds with “a bit worse than I expected,” the background image will automatically switch to the director of customer experience. This visual change sets the tone for the next question, which asks, “Where did things go wrong?” If the user provides feedback or expresses frustration, the background image dynamically switches to reflect the next step in the survey flow.

This simple flow showcases how dynamic background images can make your Typebot surveys more engaging. But trust me, the possibilities are almost limitless. You can adapt this concept to fit any type of survey or user interaction. It’s a fantastic way to create a seamless and immersive experience for your users.

Understanding Typebot Callbacks

Now that we have a grasp of the concept, let’s dive deeper into understanding Typebot callbacks. Callbacks are a powerful tool that allow you to trigger events on the parent website whenever a user interacts with your Typebot. They provide a way to execute specific functions based on certain events within your Typebot.

There are four primary callback functions you can leverage:

  1. onNewInputBlock: This function is triggered when a new input block is encountered during the Typebot flow.
  2. onAnswer: The on answer function is executed whenever a user provides an answer.
  3. onInit: This callback function is called when your Typebot is initialized. It’s the starting point of your Typebot flow.
  4. onEnd: Once your Typebot flow ends, the on end function comes into action. It allows you to perform additional actions or wrap up the conversation.

These callback functions serve as hooks that enable you to interact with your website and perform specific actions based on user input. It’s like having a set of triggers that activate different functions within your Typebot.

To better understand how these functions work, let’s take a glance at a simple code example:

Typebot.initStandard({
  typebot: 'my-typebot',
  onNewInputBlock: (inputBlock) => {
    console.log('New input block displayed', inputBlock.id)
  },
  onAnswer: (answer) => {
    console.log('Answer received', answer.message, answer.blockId)
  },
  onInit: () => {
    console.log('Bot initialized')
  },
  onEnd: () => {
    console.log('Bot ended')
  },
})

In this example, the code logs different messages based on the callbacks. When a new input block is encountered, it prints a message. Similarly, when a user provides an answer, the code displays the user’s response. This way, you can retrieve and utilize valuable information from the user’s input.

Implementing Dynamic Background Images with Typebot Callbacks

For my dynamic background image example, I utilized two callback functions: onAnswer and onEnd. These two events were key in creating the smooth transition between background images.

The magic happens when the on answer function is triggered. This function holds the code logic responsible for changing the background image based on the user’s input. By mapping the specific user input to the correct image, you can dynamically alter the visual experience within your Typebot.

To achieve a visually appealing transition between images, CSS styles play a significant role. With the right CSS properties, you can smoothly animate the change in the background images, providing an enjoyable user experience. Here’s a snippet of the CSS styles I used for my example:

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .ken-burns-container {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      position: relative;
    }

    .ken-burns-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: opacity 1s ease-in-out;
      opacity: 1;
    }

    .ken-burns-container img.fade-out {
      animation: none; /* Stop any animation */
      opacity: 0;
    }

    .ken-burns-container img.kenBurnsZoomIn {
      animation: kenBurnsZoomIn 20s ease-in-out 1 forwards;
    }

    @keyframes kenBurnsZoomIn {
      0% { transform: scale(1.0); }
      100% { transform: scale(1.15) translate(-5%, -5%); }
    }

By applying these CSS styles to your web page, you can create that eye-catching transition effect between the dynamic background images.

While ChatGPT does a significant portion of the heavy lifting in generating the necessary code, understanding how Typebot Callbacks and CSS work together is essential. Armed with this knowledge, you can create captivating Typebot experiences that leave a lasting impact on your users.