# How to embed a chatbot with an iframe, share link or QR code

URL: https://instantknowledgebot.com/guides/embed-chatbot-iframe-share-link  
Last updated: 2026-10-14

> You can embed a chatbot in three ways with InstantKnowledgeBot: a chat bubble script for every page, an inline iframe that places the chat inside a page, or a full-page share link (with a downloadable QR code) for emails, social bios and print. All three use the same bot, knowledge and analytics, and are in the bot's Embed & share tab.

There are three ways to **embed a chatbot** built with InstantKnowledgeBot: a floating chat bubble, an inline iframe, and a share link with a QR code. They all live in your bot's **Embed & share** tab and connect to the same bot, so whichever you use, answers, settings and analytics stay in one place. This guide explains when to use each and how.

## Which embed option should you use?

| Option | What visitors see | Best for |
|---|---|---|
| **Chat bubble** | A launcher in the corner of every page; clicking it opens a chat panel | Marketing sites, stores, most websites |
| **Inline iframe** | The chat as part of the page content | Help centers, FAQ and contact pages, docs portals, intranet pages |
| **Share link** | A full-screen chat page at its own URL | Emails, social bios, Slack or Teams, SMS, print via QR code |

Many businesses use the bubble site-wide plus an inline chat on the help page, and put the QR code on printed materials.

## How do you add the chat bubble?

In **Embed & share**, choose **Chat bubble** and copy the snippet:

```html
<script src="https://instantknowledgebot.com/widget.js" data-bot="YOUR_BOT_ID" defer></script>
```

Paste it before `</body>` on every page where the bubble should appear. Optional attributes: `data-position="left"` to move it to the left, and `data-open="true"` to open the chat on page load. Full walkthrough: [add an AI chatbot to a website](/guides/add-chatbot-to-html-website).

## How do you embed the chat inline with an iframe?

Choose **Inline iframe** and copy the code:

```html
<iframe src="https://instantknowledgebot.com/embed/YOUR_BOT_ID" width="100%" height="640"
  style="border:0;border-radius:16px;max-width:720px" title="Chat with us" allow="clipboard-write"></iframe>
```

Paste it where the chat should appear, in your page's HTML or a site builder's HTML or embed block:

- **WordPress:** a **Custom HTML** block.
- **Webflow:** an **Embed** element. See the [Webflow guide](/guides/add-chatbot-to-webflow).
- **Squarespace:** a **Code** block.
- **Wix:** **Embed HTML**.
- **Shopify:** a **Custom Liquid** section.

**Sizing tips:**

- Keep `width="100%"` so it fits the column, and use `max-width` to stop it getting too wide on big screens.
- Use a height of about **600 to 700 pixels** on desktop. On phones, the chat adapts to the width.
- The `title` attribute is read by screen readers. Make it descriptive, such as "Chat with our help assistant".

## How do you use the share link?

Every bot has a full-page chat at its own address:

```text
https://instantknowledgebot.com/c/YOUR_BOT_ID
```

Copy it from **Embed & share** (or use **Open share page** to preview it). Ideas for where to use it:

- **Email signatures** and auto-replies ("Ask our assistant, any time").
- **Social media bios**, such as Instagram, TikTok and LinkedIn.
- **Slack or Microsoft Teams**: pin it in a channel for an internal handbook bot. See [internal knowledge base chatbots](/solutions/internal-knowledge-base-chatbot).
- **Help center articles**: "Still stuck? Ask the assistant."
- **Sites where you can't add scripts**: link a button to the share page.

The share link needs no installation and works on any device with a browser.

## How do you get a QR code for your chatbot?

In **Embed & share**, the **QR code** section shows a code for the share link. Click **Download PNG** and use it on:

- **Restaurant table cards and menus**: see [restaurant chatbots](/solutions/ai-chatbot-for-restaurants).
- **Hotel room cards** and reception.
- **Real estate yard signs** and brochures.
- **Product packaging** and manuals.
- **Posters at events**, front desks and waiting rooms.

Print it large enough to scan easily, and add a call to action such as "Questions? Scan to ask our assistant."

## Do any options require a paid plan?

No. All three embed options are available on every plan, including Free. Plan limits apply to the bot itself, such as hosted messages and features like lead capture and badge removal; see the [pricing page](/pricing).

## How do you check where the bot is being used?

The bot's overview shows where it's **installed** (the sites that have loaded it), along with messages, conversations, top questions and knowledge gaps. Share link chats appear in the same **Conversations** list, so you can see every channel in one place.

## Can visitors see who made the chatbot?

By default, the chat shows a small "Powered by InstantKnowledgeBot" badge. Pro and Agency can remove it; Agency can replace it with your own text and link, for example your agency's name. Change it in the bot's **Settings** tab, under **Branding**.

## Which option works best for which business?

- **Online stores:** the bubble on every page, because questions come up on product pages and at checkout.
- **Clinics and law firms:** the bubble site-wide, plus an inline chat on the contact page.
- **Restaurants and hotels:** the bubble on the website, plus QR codes on tables, menus and room cards.
- **Internal handbooks:** the share link pinned in team chat, or an iframe on the intranet.
- **Agencies:** the bubble on the client's site, with the share link in the client's email signature.

## How do you track which channel visitors came from?

The **Conversations** tab shows each chat, and the overview lists the sites where the bot is installed. If you want to compare channels more precisely, for example print QR codes versus email signatures, consider a separate bot for each channel with the same documents. Each bot has its own analytics, so you can see which channel drives the most questions and leads.

## Is there anything to watch out for?

- **Content Security Policy:** if your site sets one, allow scripts and frames from `https://instantknowledgebot.com`.
- **Public access:** anyone with the share link or the page can chat with the bot. Only upload content you're happy for those people to see.
- **Duplicate bubbles:** don't add the bubble script twice on the same page.

Ready to share your bot? [Create one free](/signup) in about a minute.

## Frequently asked questions

**What's the difference between the chat bubble and the iframe?**

The bubble is a floating launcher on every page where the script is installed. The iframe places the chat inline inside one page, like any other content block.

**Can I use the bubble, iframe and share link at the same time?**

Yes. They're all the same bot, so knowledge, settings and analytics are shared.

**Is the share link public?**

Yes. Anyone with the link can open the chat. That's ideal for customers, but don't put confidential documents in a bot whose link is shared widely.

**Can I change the iframe's size?**

Yes. Adjust the width, height and max-width in the iframe code. A height of about 600 to 700 pixels works well on desktop.

**Does the QR code change if I update the bot?**

No. The QR code points to the bot's share link, which stays the same when you update knowledge or settings.
