2
0

💄 (js) Improve popup ui consistency

This commit is contained in:
Baptiste Arnaud
2023-05-23 18:01:49 +02:00
parent 423aca6133
commit c950406997
4 changed files with 34 additions and 9 deletions

View File

@@ -7,7 +7,18 @@ Head over to the Share tab of your bot and click on the Webflow button to get th
### Trigger a typebot command on a click of a button
1. Head over to the `Settings` tab of your button and add a dedicated `ID`
2. In your typebot `Embed` element, insert this code in the existing `<script>` tag. It should look like:
2. In your typebot `Embed` element, insert this code in the existing `<script>` tag:
```js
document.getElementById('BUTTON_ID').addEventListener('click', (event) => {
event.preventDefault()
Typebot.open()
})
```
You can add as many as you'd like if you need to open the bot on several button clicks
It should look like:
```html
<script type="module">
@@ -17,13 +28,18 @@ Head over to the Share tab of your bot and click on the Webflow button to get th
typebot: 'my-typebot',
})
document.getElementById('<MY_ID>').addEventListener('click', (event) => {
document.getElementById('BUTTON_ID_1').addEventListener('click', (event) => {
event.preventDefault()
Typebot.open()
})
document.getElementById('BUTTON_ID_2').addEventListener('click', (event) => {
event.preventDefault()
Typebot.open()
})
</script>
```
Make sure to replace `<MY_ID>` with the ID you added on your button element.
Make sure to replace `BUTTON_ID_1` and `BUTTON_ID_2` with the ID you added on your button elements.
In this example we are opening the popup when the button is clicked but you could also use any of the [available commands](./commands).
In this example we are opening the popup when the specified buttons are clicked but you could also use any of the [available commands](./commands).