Live demo

A Urai agent runs on this page. Look for the chat button in the corner of the page. Click the button and ask a question.

Your visitor id for this demo

reading…

The agent uses this id to find your conversation again.

New visitor id

The embed code

One script tag adds the widget to a page:

<script
  src="https://chat.app.urai.dev/api/widget/embed.js"
  data-widget-token="8778a2e5-604f-416f-af66-75c7d765834c"
  data-user-id="<your-visitor-id>"
></script>

The two attributes do different work:

• data-widget-token identifies the widget. The token is a public identifier, and it is not a secret.
• data-user-id identifies the visitor. Urai gives the same conversation to the same widget token and visitor id.

Make a visitor id

This page has no accounts, so it makes an id for you. The page makes the id one time and keeps it in local storage. You get the same conversation when you come back to this page.

const KEY = "urai-demo-visitor-id";

let visitorId = localStorage.getItem(KEY);
if (!visitorId) {
  visitorId = crypto.randomUUID();
  localStorage.setItem(KEY, visitorId);
}

The page then adds the script tag with that id:

const embed = document.createElement("script");
embed.src = "https://chat.app.urai.dev/api/widget/embed.js";
embed.async = true;
embed.dataset.widgetToken = "8778a2e5-604f-416f-af66-75c7d765834c";
embed.dataset.userId = visitorId;
document.body.appendChild(embed);

The New visitor id button above removes the id from local storage and loads the page again. The page then makes a new id, and the agent starts a new conversation.

Rules for the visitor id

• Make the id difficult to guess. A random UUID is sufficient. Do not use a sequential number, an email address, or a user name.
• Keep the id. A new id on each page load starts a new conversation each time.
• Use the id of the signed-in user when your application has accounts. Use local storage only for a visitor who does not sign in.
• The id is opaque text, and Urai does not compare it with a user table. The id cannot carry authorization.

Securing your app tells you what the widget token and the origin allowlist do, and what they do not do. Embed the widget shows the other integrations, and the layout options.