Widget integration

The Orato widget adds a floating button to your website. Visitors can start a voice call with your assistant or send a text message.

Prerequisites

An assistant with the Web Widget role. Style it on the Branding tab.

A public API key (pk_live_...) with your website domain whitelisted. See API keys.

Your Assistant ID.

Add the script

Paste this snippet into the <head> or <body> of your HTML:

<!-- Orato Voice Widget -->
<script
  src="https://app.tryorato.com/widget.js"
  data-key="pk_live_YOUR_PUBLIC_KEY"
  data-assistant="YOUR_ASSISTANT_ID"
  defer
></script>

Replace pk_live_YOUR_PUBLIC_KEY and YOUR_ASSISTANT_ID with your values.

Attribute	Description
`src`	The Orato widget script
`data-key`	Your public API key
`data-assistant`	The ID of the Web Widget assistant to load
`defer`	Loads the script without blocking your page

Initialize programmatically

In React, Next.js, Vue, or another single-page app, you can initialize the widget with the global Orato object once the script has loaded:

// Initialize manually
if (window.Orato) {
  window.Orato.init({
    apiKey: 'pk_live_YOUR_PUBLIC_KEY',
    assistantId: 'YOUR_ASSISTANT_ID'
  });
}

Platform tips

WordPress

Add the script with a header/footer code plugin, or in your theme’s footer.php before </body>.

Webflow, Framer, Wix, Squarespace

Paste the snippet into the site-wide custom code setting (head or footer) and publish.

Shopify

Edit your theme code and add the snippet to theme.liquid before </body>.

Next.js

Use the next/script component with strategy="afterInteractive" and the same src and data-* attributes, or call window.Orato.init in a client component.

Verify the installation

Reload your site. The launcher button appears in the corner you chose on the Branding tab (bottom right by default). Click it and start a call or chat.

Troubleshooting

The widget doesn't appear

The wrong assistant answers

Check that data-assistant matches the ID of your Web Widget assistant.

The microphone doesn't work

The visitor must allow microphone access, and your site must be served over HTTPS.

The same instructions are available in the app under Developer → Developer Docs.

​Prerequisites

​Add the script

​Initialize programmatically

​Platform tips

​Verify the installation

​Troubleshooting

Prerequisites

Add the script

Initialize programmatically

Platform tips

Verify the installation

Troubleshooting