Install the widget

The embed snippet, every attribute it accepts, where to put it in your page, and the inline AI search bar variant.

One <script> tag puts the chat widget on any site. It renders inside a Shadow DOM, so your page's CSS cannot affect the widget and the widget's cannot affect your page.

Copy the ready-made snippet from the chatbot's Install tab — it already carries your public ID.

The snippet

index.html

<script
  src="https://app.evoriqa.com/widget.js"
  data-chatbot-id="cb_your_public_id"
  async
></script>

Put it just before the closing </body> tag, on every page the widget should appear on. A shared layout, footer partial, or template is the reliable place.

Attributes

Attribute	Required	Value
`data-chatbot-id`	yes	The chatbot's public ID, `cb_…`
`data-position`	no	`bottom-right` or `bottom-left`; overrides the appearance setting for this embed
`data-mode`	no	`search` to render the inline AI search bar instead of the bubble
`data-target`	no	A CSS selector saying where the search bar mounts (used with `data-mode="search"`)

Without data-chatbot-id the script does nothing and logs an error to the browser console:

[Evoriqa] Missing data-chatbot-id on the widget script.

Per-framework placement

index.html

  <!-- … your page … -->
  <script
    src="https://app.evoriqa.com/widget.js"
    data-chatbot-id="cb_your_public_id"
    async
  ></script>
</body>

app/layout.tsx

import Script from "next/script";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://app.evoriqa.com/widget.js"
          data-chatbot-id="cb_your_public_id"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

footer.php

<!-- Theme footer, before </body>. A headers-and-footers plugin works too. -->
<script
  src="https://app.evoriqa.com/widget.js"
  data-chatbot-id="cb_your_public_id"
  async
></script>

theme.liquid

{% comment %} Online Store → Themes → Edit code → theme.liquid {% endcomment %}
<script
  src="https://app.evoriqa.com/widget.js"
  data-chatbot-id="cb_your_public_id"
  async
></script>

For Webflow and Framer, paste the same snippet into Site settings → Custom code → Footer.

The inline AI search bar

Instead of a floating bubble, the widget can render an inline answer box anywhere on the page — the same chatbot, the same knowledge, answered in place:

help.html

<div id="evoriqa-search"></div>
<script
  src="https://app.evoriqa.com/widget.js"
  data-chatbot-id="cb_your_public_id"
  data-mode="search"
  data-target="#evoriqa-search"
  async
></script>

The widget open on a live site

/screenshots/app/widget-live.png

Verify it works

1
Load the page and confirm the bubble (or search box) appears.
2
Send a question you know the knowledge base covers.
3
Check the conversation lands in the Inbox.

If nothing appears, check the browser console and the chatbot's allowed domains — see Domain allowlist.

Where to go next

Last updated 8 August 2026