Widgets overview

Embed a Landbot widget into your website with one of the six widget formats.

A Landbot widget is a small app you embed in your website to offer a conversational experience to your visitors. Setup is a single HTML snippet.

Six embed formats are available. Four cover most use cases:

Fullpage | Landbot.Fullpage
Popup | Landbot.Popup
Embed | Landbot.Container
Livechat | Landbot.Livechat

Two more cover specialised cases:

Native | Landbot.Native
ContainerPopup | Landbot.ContainerPopup

Note All widgets render inside an iframe in the parent site, except Native which renders directly into the parent DOM.

Embed snippet

Drop this snippet at the end of <body> on the page you want to embed the widget on. It loads the Landbot SDK as an ES module and instantiates the widget once the module is ready.

<script>
  (function () {
    var s = document.createElement('script');
    s.type = 'module';
    s.async = true;
    s.addEventListener('load', function () {
      setTimeout(function () {
        var myLandbot = new Landbot.Fullpage({
          configUrl: '...',
        });
      }, 500);
    });
    s.src = 'https://cdn.landbot.io/landbot-3/landbot-3.0.0.mjs';
    document.body.appendChild(s);
  })();
</script>

For each widget format, swap Landbot.Fullpage for the constructor of the format you want. The constructor blocks below show what changes per format — the loader stays the same.

Tip The setTimeout(..., 500) after load is defensive — the SDK assigns window.Landbot during module evaluation, and 500 ms is enough to safely handle browsers where module-load timing varies. The official Landbot examples ship with it; we recommend keeping it.

Constructors per format

Fullpage

new Landbot.Fullpage({
  configUrl: '...',
});

A launcher bubble in the bottom-right corner; opens a fullpage chat when clicked.

new Landbot.Popup({
  configUrl: '...',
});

Embed (Container)

Renders into an existing element on your page. Pass the element's selector as container.

<div id="myLandbot" style="width: 100%; height: 500px"></div>

new Landbot.Container({
  container: '#myLandbot',
  configUrl: '...',
});

Livechat

new Landbot.Livechat({
  configUrl: '...',
});

Native

Renders into the parent DOM directly (no iframe).

new Landbot.Native({
  configUrl: '...',
});

ContainerPopup

new Landbot.ContainerPopup({
  configUrl: '...',
});

See it in action

bidirectional-examples.vercel.app — a live demo site showing four real-world patterns: pre-filled queries from a search box, multiple CTA buttons opening the bot with different questions, per-product context via customData, and a bot that fills a form on the page. The HTML and JavaScript of each example are good starting points for your own integration.

SDKs overview

Widget