Website Chat

Website chat puts a chat bubble on your store or website. Messages arrive in your Raqi inbox next to your other channels, where your team or an AI agent answers them.

Create the Chat

Setting it up takes a few minutes:

• 1. Open Channels, find the Website Chat card and click Connect.
• 2. Give the channel a name, then set the title, subtitle, greeting, agent name, widget language, color and position. You can change all of them later.
• 3. Optionally fill in Allowed websites (see below).
• 4. Click Create website chat. The next screen shows your install code.

Install It on Your Website

The Install code is one line. Click Copy and paste it into your website once, following the steps for your platform under Where is your website built?:

• Shopify: in your Shopify admin, go to Online Store > Themes. Next to your current theme, click the three dots button and choose Edit code. Open layout/theme.liquid, paste the code just before </body>, then click Save. Prefer not to edit code? In the theme editor, add a Custom liquid section to the footer, paste the code there and save.
• Salla and Zid: in your store dashboard, find where your store lets you add custom code to every page, paste the code in the body or footer area and save your changes. If you can't find this setting, Salla or Zid support can tell you where custom code goes.
• WooCommerce (WordPress): in your WordPress admin, go to Plugins > Add New and install a header and footer scripts plugin. Open its settings, paste the code in the footer (body) section and save.
• Wix: in your Wix dashboard, go to Settings > Custom code and click Add custom code. Paste the code, choose All pages, place it in Body - end and click Apply. Custom code on Wix needs a premium plan and a connected domain.
• HTML: paste the code just before </body> on every page of your site, or once in a shared footer template, then publish your changes.

Allowed Websites

Allowed websites limit where the chat can run, so your code does not work if someone copies it to another site:

• Leave the field empty and the chat works on any website.
• Add your websites, one per line, such as shop.com. Each entry also covers its subdomains, so shop.com allows www.shop.com and checkout.shop.com.
• You can paste a full address: Raqi keeps only the domain. Arabic domains work too.
• Add up to 20 websites.

Chat Settings

Click Manage on the website chat to change its settings, then click Save:

Identity Verification

When a shopper is logged in to your store, identity verification links them to their contact in Raqi, so your team and your AI agent know who they are. Your server signs the shopper's user ID with the chat's Identity secret (an HMAC-SHA256 of the user ID, written as hex) and passes it to the chat as userHash. Raqi accepts only signed IDs: without a valid signature, the message still arrives, as from any other visitor.

• In Manage, find Identity verification and click Show secret. Showing it the first time creates it.
• Add the code for your platform just before the install code. In the samples below, replace YOUR_IDENTITY_SECRET with your secret; the in-app samples fill it in once you show it.
• A verified shopper's conversation moves to their existing contact when the user ID, email or phone matches. Contacts are never merged or deleted.

Shopify (Liquid)

Paste this in your theme just before the install line. It runs only for logged-in customers. The secret then lives in your theme code, where anyone on your staff with theme access can see it.

{% if customer %}
<script>
  window.RaqiSettings = {
    user: {
      userId: "{{ customer.id }}",
      email: {{ customer.email | json }},
      name: {{ customer.name | json }},
      userHash: "{{ customer.id | hmac_sha256: 'YOUR_IDENTITY_SECRET' }}"
    }
  };
</script>
{% endif %}

Node.js

Compute userHash on your server, then print RaqiSettings in the page before the install line:

const crypto = require('crypto');

// Keep the secret on your server, e.g. in an environment variable.
const RAQI_IDENTITY_SECRET = 'YOUR_IDENTITY_SECRET';

function raqiUserHash(userId) {
    return crypto.createHmac('sha256', RAQI_IDENTITY_SECRET).update(String(userId)).digest('hex');
}

// Print this in the page, before the install line, for a logged-in shopper:
// <script>window.RaqiSettings = { user: { userId: "42", email: "sara@example.com", name: "Sara", userHash: raqiUserHash(42) } };</script>

PHP

Compute userHash on your server, then print RaqiSettings in the page before the install line:

<?php
// Keep the secret on your server, e.g. in an environment variable.
$raqiSecret = 'YOUR_IDENTITY_SECRET';
$userHash = hash_hmac('sha256', (string) $userId, $raqiSecret);
?>
<script>
  window.RaqiSettings = {
    user: {
      userId: <?= json_encode((string) $userId) ?>,
      email: <?= json_encode($userEmail) ?>,
      name: <?= json_encode($userName) ?>,
      userHash: <?= json_encode($userHash) ?>
    }
  };
</script>

Page Context for the AI Agent

With every message, the chat tells your AI agent which page the shopper is on, the product they are looking at and their cart. This works on its own on Shopify, Salla, Zid and pages with product data.

• What is sent: the page address (without its query string), the page title and language, the currency, the product (name, price, currency, SKU, link and image) and the cart (number of items, total and currency).
• Only these fields are kept. Anything else is dropped, links must start with http:// or https://, and numbers must not be negative.
• The cart is read automatically on Shopify. On other platforms, set it yourself as shown below.
• Your values win: what you set comes before what the chat finds on the page.

<script>
  window.RaqiSettings = window.RaqiSettings || {};
  window.RaqiSettings.context = {
    product: { name: "Oud oil 30 ml", price: 120, currency: "SAR", sku: "OUD-30" },
    cart: { itemCount: 2, total: 240, currency: "SAR" }
  };
</script>