48 lines
1.3 KiB
Plaintext
48 lines
1.3 KiB
Plaintext
---
|
|
title: Webflow
|
|
---
|
|
|
|
Head over to the Share tab of your bot and click on the Webflow button to get the embed instructions of your bot.
|
|
|
|
## Advanced guides
|
|
|
|
### 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:
|
|
|
|
```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">
|
|
import Typebot from 'https://cdn.jsdelivr.net/npm/@typebot.io/js@0.3/dist/web.js'
|
|
|
|
Typebot.initPopup({
|
|
typebot: 'my-typebot',
|
|
})
|
|
|
|
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 `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 specified buttons are clicked but you could also use any of the [available commands](./libraries/html-javascript#commands).
|