CYBIX Developers
Back to cybix.app

Install the messenger

One script tag. It renders the launcher, loads your published settings live from the server, and starts a visitor session on first message — no build step and no framework required.

Embed snippet

Paste this before the closing </body> tag. The snippet only carries your widget id — name, colour, greeting, position and every other setting load dynamically from the dashboard on each page view, so changes go live without ever touching the snippet again.

<script
  src="https://cybix.app/widget.js"
  data-widget="default"
  async
></script>

Install per CMS

The same rule applies everywhere: install once, manage everything from the dashboard.

WordPress

  1. In your CYBIX dashboard, open Messenger → Install and download the WordPress plugin (.zip). Your widget id is already baked in.
  2. In WordPress, go to Plugins → Add New → Upload Plugin, choose the zip and click Activate.
  3. Optional: under Settings → CYBIX Messenger, keep “Pass the signed-in user” on so conversations arrive with a name and email.

Full walkthrough with screenshots: WordPress guide →

Shopify

  1. In your CYBIX dashboard, open Messenger → Install and download the Shopify snippet (.zip).
  2. In Shopify admin, go to Online Store → Themes → Edit code. Under “Snippets” click Add a new snippet, name it cybix-messenger and paste the contents of cybix-messenger.liquid.
  3. Open layout/theme.liquid and add {% render 'cybix-messenger' %} just before </body>, then save.

Signed-in customers are recognised automatically with their name and email.

Webflow

  1. Copy the embed snippet from your dashboard (Messenger → Install).
  2. In Webflow, open Site settings → Custom code and paste it into the “Footer code” field.
  3. Publish the site. The widget appears on every page.

Wix

  1. Copy the embed snippet from your dashboard (Messenger → Install).
  2. In Wix, go to Settings → Custom code → Add custom code, paste the snippet, set it to “Body — end” and apply it to all pages.
  3. Save and publish.

Squarespace

  1. Copy the embed snippet from your dashboard (Messenger → Install).
  2. In Squarespace, go to Settings → Advanced → Code Injection and paste it into the “Footer” field.
  3. Save. Code injection requires a Business plan or higher.

Custom site / any framework

  1. Paste the embed snippet before the closing </body> tag of your layout or index.html.
  2. In Next.js, put it in the root layout with next/script (strategy="lazyOnload"); in plain HTML it works as-is.
  3. Nothing else to configure — every setting is managed from the dashboard.

Optional overrides

For special cases (a campaign page with its own colour, a per-page greeting) you can override individual settings with data-* attributes. An override wins over the dashboard value on that page only; anything you leave out stays dynamic.

  • data-widgetWidget id from your dashboard (default: “default”)
  • data-nameOverride the brand name shown in the header
  • data-agentOverride the AI agent name
  • data-colorOverride the accent colour (hex)
  • data-positionbottom-right or bottom-left
  • data-greetingOverride the first message the visitor sees
  • data-whitelabelSet to 1 to hide the “Powered by” line

Settings API

The widget reads its configuration from your workspace, so branding changes take effect without touching the snippet.

# Read (public — the widget itself calls this)
curl https://cybix.app/api/widget/settings?id=default

# Update (agent token required)
curl -X PUT https://cybix.app/api/widget/settings?id=default \
  -H "X-Agent-Auth: <token>" -H "Content-Type: application/json" \
  -d '{"brandName":"Acme","accent":"#2e51ed","openingView":"chat"}'

Voice calls

The in-widget voice agent is still in development and stays hidden from visitors regardless of settings. The peer-to-peer video call links under /call/{room} do work today.