Skip to content

Commit

Permalink
📝 Custom bubble button position instructions
Browse files Browse the repository at this point in the history
  • Loading branch information
baptisteArno committed May 5, 2023
1 parent 98a21f3 commit ecc3b5f
Showing 1 changed file with 26 additions and 0 deletions.
26 changes: 26 additions & 0 deletions apps/docs/docs/embed/html-javascript.md
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,32 @@ You can bind these commands on a button element, for example:
<button onclick="Typebot.open()">Contact us</button>
```

### Custom button position

You can move the button with some custom CSS on your website. For example, you can place the bubble button higher with the following CSS:

```css
typebot-bubble::part(button) {
  bottom: 60px;
}

typebot-bubble::part(bot) {
  bottom: 140px;
}

typebot-bubble::part(bot) {
  bottom: 140pxheight: calc(100% - 140px)
}
```

If you have a preview message, you'll also have to manually position it:

```css
typebot-bubble::part(preview-message) {
  bottom: 140px;
}
```

## Additional configuration

You can prefill the bot variable values in your embed code by adding the `prefilledVariables` option. Here is an example:
Expand Down

0 comments on commit ecc3b5f

Please sign in to comment.