What are AI Chat Agents?

AI Chat Agents are Regal AI agents that handle real-time conversations with customers through a web chat experience.

Regal's AI Chat widget, powered by the Regal AI Agent, is easily embeddable in your website (via JavaScript). When a customer sends a message, the AI Agent responds instantly and can guide them toward resolution, conversion, or escalation as needed. Customers can interact with the AI Agent via whatever channel they prefer - whether it be chat, webRTC voice (enabled via the "Enable Voice" button), or both.

💬

Try it yourself - open the widget in the bottom right corner of this page to chat with Reggie.

Common AI Chat Use Cases

• Customer Support & Troubleshooting
  • Resolve customer issues quickly with dynamic troubleshooting directly from your website.
• Onboarding & Setup Guidance
  • Guide new users through setup and feature discovery as they navigate your product, reducing friction and improving activation.
• Appointment Scheduling & Follow-ups
  • Collect required information and assist customers with booking demos, consultations, or support callbacks.
• After-Hours Coverage
  • Handle inbound conversations outside business hours so customers always receive an immediate response.
• Lead Qualification & Sales Intake
  • Engage inbound visitors, ask qualifying questions, and route high-intent leads to sales or booking flows in real time.

Deploying AI Chat Agents

1. Create your SDK instance

1. Share the whitelist of origins (domains where the widget will run) with your Regal Forward Deployed Engineer.
2. Regal will create your SDK instance and return your SDK Instance ID, which you’ll use during widget initialization.

2. Add the script tag to your header

Add the Regal widget SDK script tag inside the header of your website:

<script src="https://cdn.regal.io/conversations-sdk/production/regal-widget.umd.js"></script>

3. Initialize the widget in the body

At the end of your body, add the following script tag to initialize the widget with your brand and agent details.

<script>
window.RegalWidget.init({
  apiUrl: 'https://api.regal.ai',
  brandSlug: '...your brand slug...',
  agentId: '...the UUID of your agent provided by Regal...',
  widgetHeaderText: '...your desired widget header (Chat with Regal)...',
  sdkInstanceId: '...the SDK instance ID provided by Regal...',
  // Optional: Control page visibility of widget (whitelist or blacklist pages)
  // pageVisibility: { whitelist: [{ type: "url", value: "https://..." }] },
});
</script>

Your agentId is the unique identifier of the agent powering your widget. To find this quickly, navigate to your desired AI Agent in the Agent Builder. The URL for this page contains your agentId (a string of characters). In the below example, the agentId is 03d99215-cc07-43f5-9ebb-aa5e5bc38046. Reach out to your Forward Deployed Engineer for help.

Once initialized, chat messages are automatically routed to the specified AI Chat Agent.

4. 🚀 You're live!

Once deployed, visitors can immediately start chatting with your AI Agent, and conversations will flow through Regal just like any other channel. From here, you can iterate by:

• Monitoring conversations and outcomes in Regal Reporting
• Refining agent instructions and prompting
• Enhancing knowledge base coverage

Your AI Chat Agent is ready to meet customers where they want to be met - quickly and easily.

Enhanced Configurability

Identify the Contact for More Personalized Interactions

If you know the user's phone number or email, set it at any point after the widget is initialized and before the contact sends their first message. Passing contact identifiers allows Regal to associate the interaction with the existing contact profile and enables the AI agent to reference and update customer information, allowing for more personalized interactions.

`window.RegalWidget.updateContactPhone("+19175550000");
window.RegalWidget.updateContactEmail("[email protected]");`

Dynamically Update Agent Powering the Widget

If you want to change which AI agent handles the conversation between interactions, update the agent ID dynamically:

`window.RegalWidget.updateAgentId('...agent UUID...');`

This is commonly used when routing different pages or user states to different agents.

Control Page Visibility

You can control which pages on your site display the widget, as well as where to hide it (if needed), using a whitelist or blacklist of URLs.

• Whitelist: widget is shown only on pages whose URL matches one of the rules.
• Blacklist: widget is shown on every page except those matching the rules.
• Whitelist and blacklist are mutually exclusive - avoid providing both. If you pass both, the whitelist is used and the blacklist is ignored.

This visibility is controlled by the ruleset set by pageVisibility in your RegalWidget.init() config. Each rule is either:

• type: "url" — exact URL match (e.g. "https://www.example.com/support").
  type: "pattern" — regex pattern tested against the current page URL (e.g. match any URL containing /about/blog).

Only show on select pages (whitelist)

To show the widget only on specific URLs or URL patterns:

window.RegalWidget.init({  
  apiUrl: '<https://api.regal.ai'>,  
  brandSlug: '...your brand slug...',  
  agentId: '...the UUID of your agent...',  
  widgetHeaderText: '...your desired widget header (Chat with Regal)...',  
  sdkInstanceId: '...the SDK instance ID...',  
  pageVisibility: {
    whitelist: [
      { type: "url", value: "https://www.example.com/support" }, // Show on this full URL
      { type: "url", value: "https://www.example.com/contact" }, // Show on this full URL
      { type: "pattern", value: "/help" },           // Show on any URL containing "/help"
      { type: "pattern", value: "/product/.*" },   // Show on any URL under /product/
    ],
  },
});

Show on all but this page (blacklist)

To show the widget everywhere across your website except on certain pages:

window.RegalWidget.init({
  apiUrl: 'https://api.regal.ai',
  brandSlug: 'your-brand',
  agentId: 'your-agent-uuid',
  widgetHeaderText: 'Chat with us',
  sdkInstanceId: 'your-sdk-instance-id',
  pageVisibility: {
    blacklist: [
      { type: "url", value: "https://www.example.com/checkout" }, // Hide on this full URL
      { type: "pattern", value: "/checkout" }, // Hide on any URL containing /checkout
      { type: "pattern", value: "/account/login" }, // Hide on any path under /account/login
    ],
  },
});

Programmatic visibility

If you'd like to show or hide the widget based on something other than the page itself (e.g. a button click, user state, or feature flags), you can call:

• window.RegalWidget.setVisible(true) — show the widget
• window.RegalWidget.setVisible(false) — hide the widget

Note: Calling setVisible overrides the whitelist/blacklist for the rest of the page session until the page is reloaded.