How do I integrate the typebot into a website?
Hello everyone, I hope you're all well?
I'd like to use the typebot I've created, only I don't really know how it works to put it online via an already created website, should I put it as an api and it responds to me?
thank you in advance for your answers!
32 Replies
You can embed it or insert it with plugin and shortcode (with WordPress cms https://docs.typebot.io/deploy/web/wordpress#wordpress)
Typebot Docs
WordPress - Typebot Docs
Hi TengoKu, hope you feel great as well 😊
Do you have direct access to editing the code of your website?
If so, I advise you go to the "Share" tab of your bot, select "HTML & JavaScript", then select which format you want your bot to have on your site (Standard, Popup, or Bubble), then you copy the code it's giving you and pasting it within/under the
<body> section of your website's HTML code.
If you are using another platform for your website or need additional help as to how to embed a bot on your site, let us know and we'll be happy to show you!Yes, I'm very well, thank you!
Here's the script that typebot shows me:
<script type=“module”>
import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/[email protected]/dist/web.js'
Typebot.initPopup({ typebot: “lead-scoring-1titdlh” });
</script>
but I'm wondering, do I need to do anything special on typebot?
Like deploying it for example, or do I just need to insert this script into my html for it to work?
Hi !
Thanks you I'll take a look at it
After that you select eher do you want to insert your bot you have to follow the instructions.
Reading your reply i understand that you want to use a script so you only need to select standard popup or bubble and to insert the script in the correct container.
No others actins are needed
Thank you very much for your help. I'm trying to create a template react and implement it with this.
You are welcome
I was also wondering if at some point he might ask me to pay?
or what are the pricing options?
I do not understand
can typebot ask me to pay for something?
I'm sorry but I continue to not understand what do you mean Thai put not can have a price if you want to subscribe the pro version.
There's a free and a paid version with some difference
Probably because I'm French and have trouble with English haha
this free version allows me to deploy for life?
The costs only appear if I want to upgrade to the pro version, for example.
Yes, it allows you to deploy for life, with the caveat that you're limited to 200 chats per month in the free plan, where a chat corresponds to a user starting a new discussion with the bot (and if you added the setting to save the user in the
Settings tab of your bot, when a user goes back to the bot, it won't count an additional chat)Other than that, everything you currently use in Typebot is (and will remain) free
Here's the pricing page with a detailed plans comparison:
https://typebot.io/pricing
Pricing | Typebot
Typebot pricing plans and features.
thanks for your response !!
I was also wondering, here I have a card that allows me to retrieve the postal code of a French person (“25000 for exemple”) only for the condition that follows it's only the first two digits I'm interested in, is it possible to limit the text field to 2 or can I apply a card script that makes a regex?
you have an idea ? @Anthony @Mario Barretta excuse me for a ping ...
Heya TengoKu, what you could do is use a
Set variable block with either a new variable name or replacing the existing code_postal one with the following content, which grabs the first 2 digits of it:
Because your code_postal input asks for a number, we first have to use toString() to ensure it becomes text, to then take the first 2 characters of that text, and converting it back to a number so it's easier to use in your condition later.
Now for the conditions, can you tell me if you need to do a specific thing when the code_postal is greater than (or between a number and another), or do you have a list of digits that should be exactly equal to?
Depending on your answer, I'll suggest a different approach, while remaining compactheya Anthony !
i don't understand, how i integrate this code :
{{code_postal}}.toString().slice(0, 2).toNumber()
maybe like that ?
more like this ?
Yeah thanks for your help, I'll share the rest soon! @Anthony
Mhm, you should (re)define your variable after you've asked the user for it
Let me know how it goes. You're welcome 😊
i have this error
with this :
and comparaison :
yet I redefined my variable
I do not show all my conditions there are many haha
I'm wondering why you have 3 different groups just to ask for the user's postal code 🤔 (I understand that your goal is to ask for it after asking for the age, but duplicating it 3 times seems unnecessary)
The only difference the branch is doing is updating the lead score based on their inputted age. Everything else is the same, right?
I'm assuming you want to also increment the Lead Score depending on the Postal Code
I need to know if the postal code values you're checking for in your currently-long conditions are following each other or not. What I mean is, do you have 4 postal code groups such as "All postal codes between 10 and 20, OR between 21 and 30 OR [...]"?
Or do they not follow each other and they can be like 10 or 34 or 45 picked by you specifically? Or are there "ranges"?
For now, here's a revised version of what we discussed about
I removed ALL condition blocks so that the Lead Score is only determined by one single Set variable block's script:
And I fixed the postal code variable code that grabs the first 2 digits, which was indeed returning the error you mentioned after testing:
By the way a nice trick I actually learned while reproducing and helping you, is that in the Number Input block, we can pick "Unit" under "Format", and then "year" as the unit and then the language it will be displayed as. So in your case, that's how when the user typed "28" in the number input, it displayed "28 ans" in French in the bot. I think it'd improve the user experience for your age input
yes exactly, that's why I create 3 cards so that in each one I can assign the number of points and ask the question at the same time.
yes, exactly, in the next step I assign points to the leadscore variable according to the card chosen above.
In addition, the zip codes don't follow each other, they've been chosen specifically
i try this
Super! it works great, thank you very much!
Yes, it's true that it can be great and I'm glad you've learned a few things in this discussion, but in my case, it's just age brackets, there's no need to have the exact age, after that I can always make conditions, for the customer experience for example, as you say.