DenserAIDenserAI Docs
Deploy

Website Embed

Embed your Denser chatbot on any website as a floating widget or an inline iframe.

Drop your chatbot straight into your site — either as a floating widget that follows visitors across pages or as an inline iframe placed where you want it. Both options come from the same deploy card.

Set the chatbot to Public first

A public website widget only works once the chatbot is set to Public. Update this under Security → Visibility before you embed.

Get your embed code

Open your chatbot dashboard and switch to Deploy. Select the Website Embed card, then click Get Code.

The dialog includes two snippets — one for the chat widget and one for an inline iframe. Copy the option that fits your layout.

Replace {chatbotId} with your chatbot's ID from the dashboard, then paste the snippet into your site's HTML or your tag manager.

Choose an embed style

Use the script snippet to add a floating launcher to every page.

<script type="module">
  import Chatbot from "https://cdn.jsdelivr.net/npm/@denserai/embed-chat@1/dist/web.min.js";

  Chatbot.init({
    chatbotId: "{chatbotId}",
    theme: {
      button: {
        size: "large",
        backgroundColor: "black",
        color: "white",
        bottom: 20,
        right: 20,
        iconCover: true,
      },
    },
  });
</script>

Widget button options

  • size: medium or large
  • backgroundColor and color: match your brand
  • bottom / right: adjust positioning
  • iconCover: set to true to fill the bubble with your icon

Use the iframe to embed the assistant inline on landing pages, docs, or inside an app dashboard.

<iframe
  width="100%"
  height="500"
  frameborder="0"
  src="https://denser.ai/u/embed/{chatbotId}"
/>

Styling tips

Control width, height, and border styles with CSS so the frame blends into your layout. An iframe is a good fit for embedding a knowledge base chatbot inside an internal page.

Where to paste the snippet

  • Raw HTML — add the snippet before the closing </body> tag on the pages where you want the chatbot.
  • Tag manager — paste it into a custom HTML tag (for example, Google Tag Manager) to deploy site-wide without editing templates.
  • Page builder — drop it into a custom code block on the page or section that should show the assistant.

Next steps

On this page