21
apps/docs/guides/mailer-lite.mdx
Normal file
21
apps/docs/guides/mailer-lite.mdx
Normal file
@@ -0,0 +1,21 @@
|
||||
---
|
||||
title: Add a subscriber to MailerLite
|
||||
---
|
||||
|
||||
1. Add a step that collects the email and set it into a variable
|
||||
2. Add a Webhook step
|
||||
|
||||
<Frame>
|
||||
<img src="/images/guides/mailer-lite/1.png" alt="Iframe preview" />
|
||||
</Frame>
|
||||
|
||||
3. Configure the Webhook step with the following information:
|
||||
|
||||
<Frame style={{ maxWidth: '400px' }}>
|
||||
<img src="/images/guides/mailer-lite/2.png" alt="Iframe preview" />
|
||||
</Frame>
|
||||
|
||||
For more info on what fields you can add: https://developers.mailerlite.com/reference/create-a-subscriber
|
||||
|
||||
4. Replace "YOUR_TOKEN" with your API key. It can be found here: https://app.mailerlite.com/integrations/api/
|
||||
5. Whenever the user enters his email it should add it to your subscribers' list on MailerLite
|
||||
32
apps/docs/guides/multi-avatars.mdx
Normal file
32
apps/docs/guides/multi-avatars.mdx
Normal file
@@ -0,0 +1,32 @@
|
||||
---
|
||||
title: Dynamic avatars
|
||||
---
|
||||
|
||||
You can decide to change the host avatar dynamically so that your bot can display multiple avatars. Here is a simple example:
|
||||
|
||||
<Frame>
|
||||
<img
|
||||
src="/images/guides/multi-avatars/demo.gif"
|
||||
alt="Multiple avatars demo"
|
||||
/>
|
||||
</Frame>
|
||||
|
||||
For this, head over to the "Theme" tab and set the host avatar to a variable URL:
|
||||
|
||||
<Frame>
|
||||
<img
|
||||
src="/images/guides/multi-avatars/bot-variable.png"
|
||||
alt="Variable URL bot"
|
||||
/>
|
||||
</Frame>
|
||||
|
||||
Then you can set this variable to any URL in your flow so that the host avatar changes dynamically.
|
||||
|
||||
<Frame>
|
||||
<img
|
||||
src="/images/guides/multi-avatars/flow-example.png"
|
||||
alt="Multiple avatars flow example"
|
||||
/>
|
||||
</Frame>
|
||||
|
||||
The first block defines all the avatars that can be displayed. The second block starts by setting the avatar to the wizard avatar. The final block starts by setting the swordsmith avatar.
|
||||
22
apps/docs/guides/rtl.mdx
Normal file
22
apps/docs/guides/rtl.mdx
Normal file
@@ -0,0 +1,22 @@
|
||||
---
|
||||
title: Enable RTL
|
||||
---
|
||||
|
||||
- Head over to the "Theme" tab
|
||||
- Paste the following Custom CSS:
|
||||
|
||||
```css
|
||||
.typebot-container {
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
.typebot-avatar-container {
|
||||
margin-right: 0;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.guest-container {
|
||||
margin-left: 0;
|
||||
margin-right: 50px;
|
||||
}
|
||||
```
|
||||
32
apps/docs/guides/utm-in-results.mdx
Normal file
32
apps/docs/guides/utm-in-results.mdx
Normal file
@@ -0,0 +1,32 @@
|
||||
---
|
||||
title: Forward UTM parameters to a typebot
|
||||
---
|
||||
|
||||
The UTM parameter name should be listed in the Variables dropdown of your flow you can create it on any variable dropdown. Then, if your typebot is launched with the declared UTM parameter. It should appear in the Results tab.
|
||||
|
||||
Once you have saved the UTM values into variables like `utm_source` and `utm_value`. You can build a redirect URL in a [Redirect block](../editor/blocks/logic/redirect) with the same UTMs like this:
|
||||
|
||||
```
|
||||
https://redirect-site.com?utm_source={{utm_source}}&utm_value={{utm_value}}
|
||||
```
|
||||
|
||||
<div
|
||||
style={{
|
||||
position: 'relative',
|
||||
paddingBottom: '64.5933014354067%',
|
||||
height: 0,
|
||||
}}
|
||||
>
|
||||
<iframe
|
||||
src="https://www.loom.com/embed/9b6cb65aff0a485e9e021b42310b207c?sid=2c61af7c-6aef-443e-b63e-941a079f2031"
|
||||
mozallowfullscreen=""
|
||||
allowFullScreen=""
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
Reference in New Issue
Block a user