Skip to content
Docs
LT

Add the chat to your website

One line of code on any site, how the chat window looks, and the JavaScript API.

Step 2 · Add the chat

How is your website built?

Your code · from Domains and installation
<script src="https://oryvox.ai/widgets/sales-chatbot.js" data-key="pk_..." defer></script>

Use the code from your chatbot: its data-key only works on your allowed domains.

Add ORYVOX to Shopify
  1. 1In Shopify admin open Online Store → Themes → Edit code.
  2. 2Open layout/theme.liquid and paste the code just before </body>.
  3. 3Save, then open your store once.

Then check it. In the chatbot’s Domains and installation press Check now: the card says Widget found and the chatbot turns Live.

Connect Shopify too, so your agent can look up products and orders

Domains, verification and checking the install in detail: Domains and installation.

How the chat window looks

ModeWhat visitors see
BubbleA round button in the corner (default).
Side panelThe chat opens full height on the right.
EmbeddedThe chat sits inside your page: <div data-oryvox-embed style="height:640px"></div>. Give the box a height so nothing on the page moves.

Colours, avatar and button are in Appearance.

JavaScript SDK

The chat adds window.OryvoxChat to your page. Calls made before the chat has loaded wait in a queue.

index.html
<script src="https://oryvox.ai/widgets/sales-chatbot.js" data-key="pk_..." async></script>
<script>
  window.OryvoxChat = window.OryvoxChat || [];
  OryvoxChat.push(['setContext', { product_id: 'SKU-42', product_name: 'Trail shoes', category: 'Shoes', cart_count: 2 }]);
</script>
your-site.js
OryvoxChat.open();                       // close(), toggle(), isOpen()
OryvoxChat.setContext({ cart_count: 3 }); // what the visitor is looking at
OryvoxChat.track('add_to_cart', { product_id: 'SKU-42' });
OryvoxChat.destroy();                    // remove the chat; destroy({ forget: true }) also clears its stored conversation
OryvoxChat.init({ key: 'pk_...', lang: 'en' }); // start again, or add data-manual to the script to start it yourself

Signed-in customers

your-site.js
// declared: shown to your team, never trusted for orders or account data
OryvoxChat.identify({ external_id: 'cust_42', name: 'Jonas', email: '[email protected]' });

// verified: a short-lived token your server signs
OryvoxChat.identify({ token: tokenFromYourServer });

// on logout
OryvoxChat.identify(null);

How to sign the token: Visitor identity.

What the chat reads from the page

Sent automaticallyThe page address (without the query, except utm tags), title, canonical address, language and public description.
Only when you switch it onThe page's main headings and its public schema.org product data (Security → Read headings and product data).
NeverForm fields, passwords, payment forms, hidden fields, cookies, your site's local storage or the whole page. Mark anything else to skip with data-oryvox-ignore.
Was this page helpful?