Skip to content
// guide

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

Three ways to share your AI chatbot: a site-wide chat bubble, an inline iframe in any page, or a full-page share link and QR code for email, social and print.

  • Updated
  • 4 min read
  • embed a chatbot
On this page
  1. Which embed option should you use?
  2. How do you add the chat bubble?
  3. How do you embed the chat inline with an iframe?
  4. How do you use the share link?
  5. How do you get a QR code for your chatbot?
  6. Do any options require a paid plan?
  7. How do you check where the bot is being used?
  8. Can visitors see who made the chatbot?
  9. Which option works best for which business?
  10. How do you track which channel visitors came from?
  11. Is there anything to watch out for?
  12. FAQ

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?

OptionWhat visitors seeBest for
Chat bubbleA launcher in the corner of every page; clicking it opens a chat panelMarketing sites, stores, most websites
Inline iframeThe chat as part of the page contentHelp centers, FAQ and contact pages, docs portals, intranet pages
Share linkA full-screen chat page at its own URLEmails, 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:

<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.

How do you embed the chat inline with an iframe?

Choose Inline iframe and copy the code:

<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.
  • 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".

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

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.
  • 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.
  • 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.

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 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.

Turn your docs into an AI chatbot today.

Free plan forever, no card needed. Upload your files and get a bot that answers from them in under a minute.

Last updated: · InstantKnowledgeBot