Table of Contents

How to embed your agent into your website

Jonathan Goodfellow Updated by Jonathan Goodfellow

Embed your agent into your website by copying its HTML snippet from Share > Embed into your website and pasting it into your site. Landbot offers three display formats: WebChat, Fullpage, and Embed.

🎬 Watch the Academy video tutorial for a walkthrough of the full process.

πŸ“Œ Embedding applies to the Web channel. WhatsApp and Facebook Messenger agents connect through their own channel settings and do not use an embed snippet.

How to get your agents's embed code

1️⃣ Open your agent and go to Share > Embed into your website.

2️⃣ Choose your display format: WebChat, Fullpage, or Embed.

3️⃣ Under Where are you embedding it?, select your website platform: WordPress, WebFlow, Wix, Squarespace, Shopify, Carrd, or Other.

4️⃣ Click Copy code and paste the snippet into your website.

Which display format should you choose?

Landbot offers three display formats for embedding a agent on your website: WebChat, Fullpage, and Embed. Each format generates a different snippet, so choose the format before you copy the code.

WebChat

WebChat adds a chat bubble to the bottom right corner of your website that opens the agent when a visitor clicks it. Use WebChat when you want the agent available on every page without taking over the page content.

Fullpage

Fullpage displays the agent as a full-screen experience that fills the browser window, exactly as the agent appears in Share with a link and in preview mode. Use Fullpage for landing pages where the conversation is the whole page. For examples of landing pages built with Landbot, see examples on the Landbot blog.

Embed

Embed displays the agent as an iframe placed inside your page, which gives you control over where the agent sits in your layout. Embed is the most common format for adding a agent to an existing page rather than a dedicated one.

An embedded agent can also exchange information with the page around it through the customData object. See sharing data between Landbot and the embedding page.

How to add a Proactive Message to your embedded agent

A Proactive Message is a message that appears next to the chat widget before a visitor opens it, to draw attention to the agent and prompt them to click. Find it under Advanced embedding options in the Embed into your website panel.

Enabling a Proactive Message does not change your agent's snippet. Turn the Proactive Message on, apply the changes, and save the agent β€” the message appears on your embedded agent without you copying the code again.

For setup details, see how to customize your Proactive Message.

How to customize the chat widget

The chat widget is the bubble a visitor clicks to open a Web agent, and you can change its color, icon, and position using JavaScript and CSS. See widget customizations with JavaScript and CSS.

How to embed Landbot on WordPress, Webflow, Squarespace, or Shopify

Each of these website platforms has its own step-by-step tutorial:

● Embed Landbot in WordPress

● Embed Landbot in Webflow

● Embed Landbot in Squarespace

● Embed Landbot in Shopify

● Embed Landbot in an iframe β€” for any website where you place the agent inside your own HTML

Was this article helpful?

Embed Landbot in an iframe

Contact