Basic Setup #

Choose the landbot app that better fits your needs.

• Embed
• Livechat

You can use as many Embed Landbots as you wish, but only one Livechat application per site.

Embed #

Copy your landbot snippet and paste it into your web site. Your code should look like this:

<div style="width: 100%; height: 500px; position: relative; overflow: hidden;">
  <iframe width="100%" height="100%" frameborder="0" src="{LANDBOT_URL}" style="position: absolute; left:0; right:0; bottom:0; top:0; border:0;"></iframe>
</div>

Livechat #

Copy your landbot snippet and paste it into your web site. Your code should look like this:

<div id="umiwebchat-container"></div>
<script>
  var LandbotLiveConfig = { 
    index: '{LANDBOT_URL}', 
    accent: '#d35f8f' // Livechat bubble color
  };
</script>
<script src="https://static.helloumi.com/umiwebchat/umiwebchat.js" defer></script>

Advanced Setup #

A landbot can trigger custom events that our site can listen to. The same way a landbot can listen to external events triggered from your site.

An advanced setup is required to use the events based interface in your site.

Embed #

If you're using the landbot "Embed" mode, an "Access Point" module is needed to get in touch with your landbot.

• Just add this code into your site only once. Even if multiple "Embed" landbots are used in the same page, just one script is needed.

<script src="https://static.helloumi.com/umicore/UmiAccessPoint.js"></script>

• Your landbot iframe needs a name in order to be identified. Otherwise, communication won't be stablished. Give each landbot of your site a name.

<iframe name="{LANDBOT_NAME}" ... ></iframe>

Then, this would be the resulting code snippet in your site:

<div style="width: 100%; height: 500px; position: relative; overflow: hidden;">
  <iframe name="{LANDBOT_NAME}" width="100%" height="100%" frameborder="0" src="{LANDBOT_URL}" style="position: absolute; left:0; right:0; bottom:0; top:0; border:0;"></iframe>
</div>
<script src="https://static.helloumi.com/umicore/UmiAccessPoint.js"></script>

Livechat #

See Basic Setup. It already includes advanced features.

Usage #

Embed #

After an advanced setup, we need to check everything is working. Follow the next steps:

1. Create a LandbotAP object, which is the Access Point between your site and the landbot. Use the iframe name we set before as the first argument.

   var myLandbot = new LandbotAP('{LANDBOT_NAME}');

   
   

2. Execute the following code in your browser debugger tools console. If setup is correct, you should see an active listener log. If an error occur, make sure you've followed all advanced setup steps carefully.

   myLandbot.send("landbot-listen");

   The successful log should look like: [{LANDBOT_NAME}-LB] listener is active.

Livechat #

There's no need to create an Access Point for the Livechat mode landbot. The Access Point is included in the basic setup with a reserved name (LandbotLivechat). Check your communication interface with the following command:

LandbotLivechat.send("landbot-listen");

The successful log should look like: [LandbotLivechat-LB] listener is active.

Events #

You can use our pre-built events or create custom ones.

Pre-built events #

Your landbot is always listening to the following events:

Event	Description
landbot-listen	Checks landbot connectivity with its parent page
landbot-msg-send	Send a custom message to the chat
landbot-config	Sets landbot config
landbot-custom-data	Sets landbot customData

Example:

myLandbot.send("landbot-msg-send", {
  message: "My custom message",
});

But at the same time you can listen to the following landbot events:

Event	Description
landbot-load	Landbot is loaded
landbot-msg-receive	Triggered when a new message is received

Example:

myLandbot.on("landbot-msg-receive", (message) => {
  console.log(message);
});

Custom events #

This is the most complex section, but the most powerful. See the Examples section to getting started with the custom events features.