Two bots in same page

PPhill

I have two bots in the same page. One, bot1 is a popup form that starts when a button is clicked and the other, bot 2, is a bubble to interact with users. Bot 2 (bubble) is set via wordpress plugin. I use some other buttons to open this bot 2 aswell so i can put some text in the input field.
My problem is that if a user starts a form (via popup bot 1) and clicks to 'exit' the popup, the bot stays 'suspended' and if i call Typebot.open(); on a cick of a button both bots open, not only the bot2 (bubble from plugin) as i want.
Is there a way to open a particular bot if both are present in the same page?
If i set to initiate bot2 in a button click then i will have double bubble bots...

31 comments

MMario Barretta

Give a look to https://docs.typebot.io/deploy/web/libraries/html-javascript and https://www.npmjs.com/package/@typebot.io/js to better understand how to manage differents istances.

I'm not expert but i think that these link can help you and i've tried to use IA to have scripts that you can test :

Initialize Bot1 (Popup):

Use the following script to initialize the popup bot:

javascript

<script type="module">
import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected]/dist/web.js';
const bot1 = new Typebot();
bot1.initPopup({
typebot: 'YOUR_BOT1_ID',
// Additional configuration for bot1 if needed
});
</script>
Initialize Bot2 (Bubble):

Use this script to initialize the bubble bot:

javascript

<script type="module">
import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected]/dist/web.js';
const bot2 = new Typebot();
bot2.initBubble({
typebot: 'YOUR_BOT2_ID',
// Additional configuration for bot2 if needed
});
</script>

Control Each Bot Separately:

To open Bot1 (Popup): Use bot1.open();
To open Bot2 (Bubble): Use bot2.open();

MMario Barretta

To integrate the Typebot scripts:

Insert the Scripts into Your Page Code

If you have direct access to the page code (HTML, CSS, JavaScript), you can include the scripts as follows:

Open your webpage’s HTML file or editor.
Insert the following code in the <head> section or before the closing </body> tag:
html

<script type="module">
import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected]/dist/web.js';

// Initialize Bot1 (Popup)

const bot1 = new Typebot();
bot1.initPopup({
typebot: 'YOUR_BOT1_ID', // Replace with your Bot1 ID
});

// Initialize Bot2 (Bubble)

const bot2 = new Typebot();
bot2.initBubble({
typebot: 'YOUR_BOT2_ID', // Replace with your Bot2 ID
});
</script>
Add buttons to control the bots on your webpage:

html

<button onclick="bot1.open()">Open Bot 1 (Popup)</button>
<button onclick="bot2.open()">Open Bot 2 (Bubble)</button>

WordPress

two ways:

a) Via the functions.php File

Go to Appearance > Theme File Editor in your WordPress dashboard.

Open the functions.php file of your active theme.

Code:

php

function add_typebot_scripts() {
?>
<script type="module">
import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected]/dist/web.js';

// Initialize Bot1 (Popup)
const bot1 = new Typebot();
bot1.initPopup({
typebot: 'YOUR_BOT1_ID',
});

// Initialize Bot2 (Bubble)
const bot2 = new Typebot();
bot2.initBubble({
typebot: 'YOUR_BOT2_ID',
});
</script>
<?php
}
add_action('wp_footer', 'add_typebot_scripts');

b) Plugin

Install a plugin like Insert Headers and Footers.

Go to Settings > Insert Headers and Footers.

Paste the same Typebot script into the Footer Scripts section.

If You Use Elementor or Other Page Builders

If your website uses a page builder like Elementor:

Edit the page where you want the bots.
Add an HTML Widget or a Custom Code Block.
Paste the Typebot script into the widget and save.

MMario Barretta

Obviously these last replies have been realied with IA (trained with typebot documentation) help 😉

PPhill

thank you i'll try it .

MMario Barretta

you are welcome.
Please give me a feedback that i'm curious if it work well or not.
Thank You

PPhill

sure. i'll share the output

PPhill

nothing works. by clicking buttons nothing happens. And the objective is not the same...

I have the typebot wordpress plugin to show the bot bubble in all pages (bot1);

Also i have some buttons (and links) that opens the bot1 and populate the input text field;

I have a button to open a specific bot2 in popup mode;

If i hit a link/button to open bot1 before i open bot2, it works well. But if i click the button to open bot2 (as a popup) and then close the popup and if i use links/buttons to open default bot1, both bots open (popup and bubble);

I guess that i would have to kill bot2 everytime/when the popup is closed;

MMario Barretta

reading your flow me too think that you have to kill bot2 and the "solution" can be on the pop up management.
How do you manage it?

PPhill

it's a bot that initiates in popup mode. What do you mean with "How do you manage it?"
Something should work... maybe using the option: onClose?: () => void;

MMario Barretta

i mean that a pop up can be built in a lot of ways for example with a specific plugin or with a page builder look like elementor or also with code etc etc
related to your popup there's to investigate in the close function that need to be customized to kill your bot for example usig onclose function a code similar to this:

<script type="module">
import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected]/dist/web.js';

// Initialize Bot2 (Popup)
const bot2 = new Typebot();
bot2.initPopup({
typebot: 'YOUR_BOT2_ID', // Replace with your Bot2 ID
onClose: () => {
console.log('Bot2 closed');
// Destroy Bot2 or reset its state to avoid interference
bot2.destroy();
},
});

// Button to open Bot2
document.getElementById('open-bot2').addEventListener('click', () => {
bot2.open(); // Open the popup bot
});
</script>

PPhill

i guess that's not the way forward

iimoclub

Its better to install your code on Tag Manager if you embed it on wordpress, i have some case that typebot script can broke another external script

And if you plan to open typebot with button trigger, just use hide and show elements on your wordpress builder

PPhill

Thanks for the reply. i'll try that option for what regards using Tag Manager to push a bot instead of the plugin.
About the show/hide i'm not conviced or i'm not seeing it through...

PPhill

Can anyone tell me if we can address to a bot that is on the same page as other bots? I'm trying IDs without success. How can one open a specific bot where's without interfer with other bots?

PPhill

Can anyone let me know if i can kill an instance of a bot? this is getting complex and i'm loosing focus and energy with a simple feature...

BBaptiste

Hi @Phill, sorry to hear that you struggle here

BBaptiste

That's a good use case, let me try out on my end first

BBaptiste

Indeed it does not seem we can open a particular embed when we have 2 different

BBaptiste

OK I'm shipping something for this

BBaptiste

For each command you can now pass an optional id prop to target a specific typebot. I.e. Typebot.open({ id: 'my-bubble' })

BBaptiste

embed lib v0.3.33

nnuo

Thank you very much.

PPhill

you rock! @Baptiste thank you

PPhill

@Baptiste There's a bug when using Library version: 0.3.33.
The flow gets stuck when dealing with HTTP Request block > Methode GET > Execute on client ... ON.
I've tested with POST and GET with no issues but when i test with GET with 'Execute on client' ON it stucks the flow in this block.
I've changed back to Library version: 0.3.12 and the block works as expected. (unfortunately the multiple bots in same page don't)

PPhill

FYI Library version: 0.3.14 is the last version where HTTP Request block > Methode GET > Execute on client ... ON works for me. After that version 0.3.20 and so on I get the stuck problem where the chat stays at "infinite writting mode" image.

BBaptiste

Can you provide a link so that I can reproduce the issue? @Phill

PPhill

@Baptiste sure no problem. sending you PM.

BBaptiste

Sorry I overlooked, I thought you were using cloud version

BBaptiste

The lib v0.3.33 is not compatible with your Typebot instance version

BBaptiste

So to use that lib version, you will need to upgrade your Typebot instance

BBaptiste

I am currently releasing a new version: 3.2.0, make sure to wait for the deployment to finish: https://github.com/baptisteArno/typebot.io/actions/runs/12212084763

Add a reply

Share feedback, ideas and get community help

Two bots in same page