Walkthrough

Step-by-step Instructions

Creating Dynamic Backgrounds Using Typebot Callbacks

Welcome to my blog post on creating dynamic backgrounds using Typebot callbacks! In this article, I’ll guide you through the process of setting up Typebot flow, configuring the source code, and making modifications to customize your dynamic backgrounds. So let’s dive right in!

Setting up Typebot Flow

The first step in creating dynamic backgrounds is setting up Typebot Flow. Don’t worry, it’s not as complicated as it sounds! To get started, you’ll need to duplicate the Typebot Flow in your own account. Simply scroll up, locate the helpful links section, and click on the duplicate button to create a copy in your account.

Setting up Google Sheet

Once you have your Typebot Flow duplicated, it’s time to set up the Google Sheet. In the blog post, I’ve shared a Google Sheet Template link that you’ll need to open. After opening the template, go to the “File” menu and select “Make a Copy” to save it into your Google Drive. This Google Sheet will play an important role in the background dynamic process.

Setting up the Source Code

Now comes the exciting part – setting up the source code! Head over to the Github Repo that I’ve provided in the blog post. From there, you have a few options for copying the code. You can either download the raw files directly, download the entire repository as a zip file, or use git clone if you’re familiar with it. Choose the method that works best for you and bring the code into your preferred code editor.

Once you have the code in your editor, you’ll notice that it has a specific structure. The main files you’ll be working with are located in the dynamic background callbacks folder. Specifically, there are two subfolders – one for image examples and another for video examples. For now, let’s focus on the image example, as it provides a more nuanced understanding.

Exploring the index.html File

Within the image example folder, you’ll find an index.html file. This file contains all the necessary components for creating dynamic backgrounds. Take a moment to explore its contents. Inside the file, you’ll find different sections – each serving a specific purpose.

The style tag contains the Ken Burns effects used for the background animation. Scroll down further, and you’ll come across the main body of the webpage. This is where the background image is defined. Pay attention to the script section, as it’s responsible for most of the action in the dynamic background process.

Configuring Typebot in the Code

To integrate Typebot into the code and make the backgrounds truly dynamic, there are a few modifications we need to make. Firstly, you’ll need to retrieve your Typebot ID from your Typebot account. I’ve provided instructions in the blog post to help you locate and copy your ID. Once you have it, insert it into the script section of the index.html file.

Next, you’ll want to update the variables in the code to match your specific needs. This is where you can personalize the dynamic backgrounds according to the information you want to collect from users. Make sure to follow the instructions in the blog post to correctly update the variables.

Modifying the Code for Specific Conditions

The code includes conditions for image selection based on user input. If you want to customize these conditions, you have the flexibility to do so. I’ve provided an example in the blog post on how you can modify the code using ChatGPT assistance. This unique feature allows you to ask ChatGPT to modify your code based on your requirements.

To test the changes you’ve made, simply save the modified code and see if the dynamic backgrounds behave as expected. If you encounter any issues or conflicts, don’t hesitate to reach out for support. Troubleshooting is a normal part of the process, and I’m here to help.

Additional Resources

• Dynamic Image Demo
• Dynamic Video Demo
• Github Repo
• Typebot Template: Customer Feedback Survey
• Google Sheet Template
• Simone’s Demo
• Typebot Docs