Skip to content
← Back to the Live Chat SDK

Developers · Live Chat SDK

Install Live Chat in a Zoho Desk Help Center

Zoho Desk's customer Help Center serves your portal from Zoho's own domain and applies a strict Content Security Policy (CSP) to that page. The standard raia embed tag pasted into the Inline Script block is stripped or blocked, so the widget never appears. Adding the script programmatically from the JS Function block works, and that is the supported way to run raia Live Chat inside a Zoho Desk Help Center.

01

Why the normal embed fails

Zoho Desk's Help Center customization offers three code surfaces — HTML, CSS, and JS — and the JS tab is split into Inline Script and JS Function. Most people drop the standard raia embed tag into Inline Script, because that is what you would do on your own site:

html
<!-- Does NOT work inside Zoho Desk's Inline Script block -->
<script
  async
  src="https://raiabot.raia2.com/assets/raia-chatbot-widget.js"
  data-api-key="YOUR_AGENT_ID_HERE">
</script>

On a Zoho Desk portal that snippet does not load. The Help Center page is delivered with a Content Security Policy that restricts which origins may serve executable JavaScript, and the raia widget domain (raiabot.raia2.com / raiaboteu.raia2.com) is not on Zoho's allow list. The chat service itself is perfectly reachable — you can open the widget URL directly in a browser — but the portal page refuses to execute a <script src> tag pointing at it. In the browser console this shows up as a "Refused to load the script … violates the following Content Security Policy directive: script-src …" error, or the tag is silently removed by the Help Center's markup sanitiser.

This is a Zoho-side restriction

Zoho does not currently expose a setting to add third-party domains to the Help Center CSP allow list, and raia cannot change it from our side. Use the JS Function method below.
02

What you need before you start

RequirementWhere to find it
Zoho Desk admin accessYou need permission to open Setup → Channels → Help Center and customise the portal.
A published Help CenterSetup → Channels → Help Center → select the portal you want to edit.
data-api-keyYour Agent ID, shown in raia Command under the agent's Live Chat Skill settings.
The correct widget domainraiabot.raia2.com for US-hosted agents, raiaboteu.raia2.com for EU-hosted agents.
03

Step-by-step setup

  1. 01
    In Zoho Desk, open Setup (gear icon) → Channels → Help Center and select the Help Center you want to add the agent to.
  2. 02
    Click Customize (or Customize Your Portal) to open the theme editor for the customer-facing portal.
  3. 03
    In the left panel switch to the JS tab, then select the JS Function sub-tab — not Inline Script.
  4. 04
    Paste the loader below and replace YOUR_AGENT_ID_HERE with your agent's data-api-key.
  5. 05
    Click Preview to load the portal with your change and confirm the launcher appears.
  6. 06
    Click Save draft, then Publish to push the change to the live Help Center.
javascript
var s = document.createElement('script');
s.src = 'https://raiabot.raia2.com/assets/raia-chatbot-widget.js';
s.setAttribute('data-api-key', 'YOUR_AGENT_ID_HERE');
s.setAttribute('data-is-active', 'true');
s.async = true;
document.head.appendChild(s);
Zoho Desk Help Center customisation editor with the JS Function tab open and the raia widget loader script pasted in
The loader goes in Customize → JS → JS Function. Use Preview to test, then Save draft and Publish.

Use the right region domain

EU-hosted agents must load https://raiaboteu.raia2.com/assets/raia-chatbot-widget.js. US-hosted agents use https://raiabot.raia2.com/assets/raia-chatbot-widget.js. Loading the wrong region returns an unauthorised agent.
04

What the loader does

LinePurpose
document.createElement('script')Builds the script element in JavaScript instead of in markup, so the Help Center's HTML sanitiser never sees a third-party script tag.
s.src = '…/raia-chatbot-widget.js'Points at the raia widget bundle for your hosting region.
data-api-keyIdentifies which agent answers. This is a public agent identifier, safe to expose in the browser.
data-is-activeSet to 'true' so the widget initialises and renders the launcher as soon as it loads.
s.async = trueLoads the widget without blocking the Help Center page render.
document.head.appendChild(s)Injects the script at runtime, after the portal page has already been served.
05

Verify the install

  1. 01
    Open the published Help Center in a normal (non-admin) browser session.
  2. 02
    Confirm the raia launcher renders in the corner of the page and opens on click.
  3. 03
    Open DevTools → Network and confirm raia-chatbot-widget.js returns 200.
  4. 04
    Send a test message and confirm the conversation shows up in raia Copilot.
06

Troubleshooting

The widget still doesn't appear after publishing. What now?

Hard-refresh the portal (Zoho caches published theme assets), then confirm the code is in JS Function and not Inline Script, and that you clicked Publish rather than only Save draft.

The console shows a Content Security Policy error even with the JS Function method.

Check that the src URL matches your agent's hosting region exactly and uses https. If the error names a different domain, another script on the portal is at fault, not the raia widget.

Can I use the Live Chat Security Key here?

Yes. After the script is appended, send the INIT command with your security key from the same JS Function block, exactly as described on the Live Chat SDK page. Generate the key server-side; never expose your Agent Secret Key.

Does this method support the rest of the SDK commands?

Yes. Once the widget loads, window.raiaChat is available on the Help Center page and accepts SET_USER, OPEN_CHAT, UPDATE_THEME and every other command documented in the Live Chat SDK reference.
07

Related