Table of Contents

Embed snippet adapted to special web frameworks

Pau Sanchez Updated by Pau Sanchez

The default snippet you can find in the Share section can be used in most of the sites. However, there are specific frameworks that can have issues due to the way the deal with iframes, like the one used to display Landbot.

Common frameworks that might need to adapt the code to embed the bot are:

- Magento

- Joomla

- Blackboard

- Custom PHP frameworks

- Some visual Web builders (builder.io ...)

The below snippets however, have some restrictions, specially in the communication between Landbot and the parent page where the bot is embedded:

  • Communication between embedded bot and parent page is not possible with Landbot v3 SDK (article)
  • Communication between the parent page and the embedded bot is not possible with Landbot v3 SDK (article)
  • Hidden Fields features won't work as expected (article)
  • Proactive won't be available

For that reason, here are adapted snippets in for the different type of embeds

Livechat snippet adapted

Instead of the default code:

<script SameSite="None; Secure" src="https://static.landbot.io/landbot-3/landbot-3.0.0.js"></script>
<script>
var myLandbot = new Landbot.Livechat({
configUrl: 'https://chats.landbot.io/v3/H-868798-Q38HBBI16W4V11JL/index.json',
});
</script>

You should use:

<script SameSite="None; Secure" src="https://static.landbot.io/landbot-widget/landbot-widget-1.0.0.js"></script>
<script>
var botUrl = 'https://chats.landbot.io/v3/H-868798-Q38HBBI16W4V11JL/index.html'
var myLandbot = new LandbotLivechat({ index: botUrl, navOptions: { close: true, refresh: false, }, });
</script>

Note: Change the botUrl value according to your needs

Embed (container) snippet adapted

Instead of the default code:

<script SameSite="None; Secure" src="https://static.landbot.io/landbot-3/landbot-3.0.0.js"></script>
<div id="myLandbot" style="width: 100%; height: 500px"></div>
<script>
var myLandbot = new Landbot.Container({
container: '#myLandbot',
configUrl: 'https://chats.landbot.io/v3/H-868798-Q38HBBI16W4V11JL/index.json',
});
</script>

You should use:

<script SameSite="None; Secure" src="https://static.landbot.io/landbot-widget/landbot-widget-1.0.0.js"></script>
<div id="myLandbot" style="width: 100%; height: 500px"></div>
<script>
var botUrl = 'https://chats.landbot.io/v3/H-868798-Q38HBBI16W4V11JL/index.html'
var myLandbot = new LandbotFrameWidget({ container: '#myLandbot', index: botUrl, navOptions: { close: true, refresh: false, },});
</script>

Note: Change the botUrl value according to your needs

Pop Up snippet adapted

Instead of the default code:

<script SameSite="None; Secure" src="https://static.landbot.io/landbot-3/landbot-3.0.0.js"></script>
<script>
var myLandbot = new Landbot.Popup({
configUrl: 'https://chats.landbot.io/v3/H-868798-Q38HBBI16W4V11JL/index.json',
});
</script>

You should use:

<script SameSite="None; Secure" src="https://static.landbot.io/landbot-widget/landbot-widget-1.0.0.js"></script>
<script>
var botUrl = 'https://chats.landbot.io/v3/H-868798-Q38HBBI16W4V11JL/index.html'
var myLandbot = new LandbotPopup({ index: botUrl, navOptions: { close: true, refresh: false, },});
</script>

Note: Change the botUrl value according to your needs

Styling the widget

<script src="https://static.landbot.io/landbot-widget/landbot-widget-1.0.0.js"></script>
<script>
var customStyle = '#app-LandbotLauncher { transform: scale(0.8) !important; }';
var botUrl = 'https://chats.landbot.io/v3/H-868798-Q38HBBI16W4V11JL/index.html'
var myLandbot = new LandbotLivechat({
index: botUrl,
navOptions: {close: true,refresh: false,},
launcherOptions: {style: customStyle}
});
</script>

How did we do?

Customizing the Proactive Message

Contact