Embed the chat widget

1. Open “Install the widget”

In Kyros, open your assistant, go to “Deploy” and click “Install the widget”. The dialog asks you two things:

• “Website / framework”: HTML, React / Next.js, WordPress, TYPO3 or Behörde (GSB) for the Government Site Builder. For each tab, the dialog shows where to paste the code.
• “How should it appear?”: “Floating bubble” (a chat button in the corner of every page) or “Inline frame” (embedded in the page content).

2. Set the code expiry

Kyros signs the code you copy. Under “Advanced” → “Code expiry” you set how long it stays valid: “Never expires”, 7 days, 30 days, 90 days or 1 year. When you change the period, Kyros generates a new code, so copy the code after you’ve made your choice.

3. Floating bubble: paste the script

For the floating bubble, “Copy code” gives you a script tag. It looks like this:

<script src="https://kyros.omniratio.de/api/widget?id=YOUR-WIDGET-ID&sig=SIGNATURE&type=chatbot"></script>

Paste it into your site’s HTML, just before the closing </body> tag. The placeholders are for illustration only: id is your widget’s ID and sig is the signature. If the code has an expiry date, the URL also carries an iat parameter. Don’t retype the code; always copy it in full from Kyros.

The “React / Next.js” tab gives you a component that loads the same script instead. Render it once, for example in your root layout (app/layout.tsx in the App Router, _app.tsx in the Pages Router).

4. Inline frame: paste the iframe

The inline frame shows the chat right in your page content, on a contact or help page, for example. Paste the code where the chat should appear. The copied code looks like this:

<iframe
  src="https://kyros.omniratio.de/embed/widget/YOUR-WIDGET-ID?sig=SIGNATURE"
  width="100%"
  height="600px"
  allow="microphone; camera; autoplay"
  style="border: none; border-radius: 16px;"
></iframe>

Here, too, Kyros fills in the ID and signature when you copy the code; a code with an expiry date adds the iat parameter. You can adjust the width and height in the code to fit your layout.

5. Restrict website access

In the widget settings, use “Website access” to set which domains the chat can open on. Add your domain; wildcards such as *.your-domain.com cover subdomains. Add the main domain as a separate entry. If the list stays empty, the chat isn’t restricted. Remember any staging or test domains you check the widget on.

6. Go live

Publish your site and reload it – the widget appears automatically. In a CMS, save and publish the page; for a React app, rebuild and deploy. See the chat widget page for the widget itself; for programmatic access, continue to the API reference.

Guides for your platform

Where exactly the code goes depends on your platform. Kyros doesn’t offer plugins for them; in each case you paste the code you copied. For platforms without their own tab in the dialog, use the code from the “HTML” tab. Step-by-step guides are available for WordPress, TYPO3, Shopify, Shopware, HubSpot, Wix and Webflow.

If the widget doesn’t appear

• Chat window won’t load: domain not allowed. If Website access lists domains, the chat only opens there. Check that your domain, including staging, is listed.
• Your site’s Content Security Policy: If your site sends a Content Security Policy, it must allow content from kyros.omniratio.de, or the browser blocks the widget. The developer tools console shows what is blocked.
• Consent tool or optimization plugin: Consent tools can hold the script back until visitors opt in, and optimization plugins may delay JavaScript until visitors scroll or move the mouse. Test with and without consent, and exclude the script from the delay if needed.