Typebot
Log in

Share feedback, ideas and get community help

Updated 6 months ago

variables in script for bot name and colors.

At a glance

The community member is interested in using variables in the JavaScript script to customize the appearance of a Typebot, such as the bubble background color, avatar URL, and Typebot name. They want to be able to load different Typebots on different pages based on the URL. The community member currently uses a webhook to check the URL and change the bubble color accordingly.

In the comments, another community member states that only the avatar URL can be variabalized, and provides a link to the Typebot documentation on multi-avatars. They also mention that changing the other elements would be difficult to implement on Typebot's side.

Another community member shares a workaround they have found, which involves pairing Typebot with n8n. Instead of using the default Typebot script, they call an n8n workflow webhook as the script source, retrieve the desired theme options, and return a custom JavaScript body to display the Typebot with the correct configuration.

Useful resources
RRuss Webb
It is possible to use variables in the js script for things like the bubble background color, avatar URL, and even the typebot name? I want to be able to add the JS to the head of a website, but have different bots load on different pages based on the URL that I pull into the bot with a set variable block with the JS function in the custom value to pull the host url. Right now, I pull in the URL, split it and check with a webhook in a first step of a flow. I'm wanting to then change the bubble color based on the webhook returned values. In other words, if URL subpage is a specific product category of an eCommerce store, checked with a webhook to an automation that checks a postgresql db for the values, I want to change to a red bubble and run a specific bot.
B
R
4 comments
BBaptiste
The only thing that can be variabalized in what you cited is Avatar URL
BBaptiste
https://docs.typebot.io/guides/multi-avatars
BBaptiste
For the other things, that would be difficult to implement on Typebot's side
RRuss Webb
I figured out a workaround that works perfect for me. I pair typebot with n8n. Instead of using the default typebot script in the head of my html, I instead called the webhook of an n8n workflow as the 'src' in the script, retrieved the desired colors, avatar, size, etc (theme options for bubble) and then return a custom 'created-on-the-fly' javascript body that then executes on the host to display the bot with the correct configuration. Works slick and honestly, it's going to be something I use for many other embedded tools. Just thought I'd share.
Add a reply
Sign up and join the conversation on Discord