Guides
  1. use-cases

Add Lyro to Your Website

Add Lyro to Your Website

The Lyro chat widget puts your AI agent on every page of your site with a single script tag. This guide walks you through creating a widget, installing it, styling it to match your brand, optionally identifying logged-in users, and testing it before you go live.

Step 1: Create a widget

From the dashboard, open the Distribution area and go to the Chat Widget tab.

  • Click Create Widget. A new widget is created with sensible defaults and opens in the editor.
  • Give it an internal name (for example, "Marketing site" or "App"). This name is only for you - visitors never see it.

You can run more than one widget - for example, one for your marketing pages and another inside your logged-in app - each with its own appearance and routing.

A widget must be enabled to load on your site. You can toggle this any time on the Appearance tab without touching your code.

Step 2: Customize the appearance and content

The editor is organized into tabs. Style the widget before you install it, then keep tuning it later - changes apply without editing your snippet.

Appearance

  • Accent color - The main brand color used across the widget.
  • Avatar image - The picture shown for your agent in chat.
  • Banner image - An optional header image at the top of the panel.

Content

FieldWhat it sets
TitleThe main greeting at the top of the widget
SubtitleA short line under the title
Welcome messageAn optional opening message
Header titleOverrides the title in the chat header
New chat title / subtitleCopy shown when starting a fresh conversation

Behavior

  • Routing - Pick a specific agent to handle this widget, or leave it on Auto to route by intent classification.
  • Conversation lifecycle - Auto-resolve idle chats and ask visitors for a 1-5 star rating when a chat closes.

A live preview sits beside the editor, so you can see every change as you make it. Click Save Changes when you are happy.

Step 3: Get the install snippet

Open the Install tab in the widget editor. Lyro generates a one-line script tag with your widget id already baked into the URL - you do not need to configure anything by hand.

  • Click the copy button next to For anonymous visitors to grab the snippet.
  • It looks like a single <script src="..." async></script> line.

Step 4: Paste it into your site

Add the snippet to the HTML of every page where you want the widget to appear. Place it just before the closing </body> tag (the dashboard also accepts it in the <head>):

<script src="https://app.getlyro.ai/widget/YOUR-WIDGET-ID/widget.js" async></script>

That single tag loads the widget, reads your saved appearance settings, and renders the launcher bubble. The async attribute keeps it from blocking your page.

Using a CMS or site builder? Most platforms have a place to add custom code or scripts in the site or page settings - paste the snippet there.

Step 5 (optional): Identify logged-in users

If your visitors log in, you can tell Lyro who they are so conversations are tied to the right person and their details appear under People.

On the Install tab, copy the For logged-in users snippet. It defines a small settings object before the script loads, where you fill in values from your backend:

  • email and a stable user_id - so anonymous and known sessions merge into one contact.
  • name and any extra keys (like plan or company) - stored as contact properties.

Once the widget is loaded, a small JavaScript API is available from your page to:

  • update a visitor's properties when their data changes.
  • shutdown the widget on logout to clear the current visitor.
  • show / hide the launcher or open / close the chat panel from your own buttons.
  • track behavioural events and add or remove tags on a contact.

Custom contact properties must be defined under Settings - Contact properties before you send them. Standard keys like name, email, phone, and company work out of the box.

See chat-widget for the complete JavaScript API reference, including every command and event.

Step 6: Test it

  1. Open the page where you pasted the snippet and confirm the launcher bubble appears in the corner.
  2. Click it and send a question to make sure your agent responds.
  3. Back in the dashboard, watch the chat land under conversations.

For a quick check before touching your live site, use the Simulator link on the Install tab to load your widget in a sandbox page.

What's next