Installation Guide

Install ChatVix on any website or platform in seconds.

💡 Where to Find Your IDs

Your Tenant ID and Chatbot ID are available in the Installation step of your ChatVix dashboard. After completing the onboarding process, you'll see your unique embed code ready to copy.

Plan-Aware Attributes

The embed script now carries capability flags so the widget can enable text, voice, and live features securely. Update the values according to your subscription and language preferences:

  • data-plan-tier — starter, team (Growth), or business (Pro).
  • data-capabilities — JSON flags (e.g. {"chat":true,"tts":true,"live":false,"rag":false}).
  • data-tts-voice-language — Preferred language code for TTS (Growth/Pro).
  • data-tts-voice-gender — female or male voice profile (Growth/Pro).

HTML

Basic HTML websites

<!-- Adjust plan-tier and capabilities according to your subscription -->
<script src="https://widget.chatvix.com/widget.js" 
        data-tenant="YOUR_TENANT_ID" 
        data-chatbot="YOUR_CHATBOT_ID"
        data-plan-tier="starter"
        data-capabilities="{&quot;chat&quot;:true,&quot;tts&quot;:false,&quot;live&quot;:false,&quot;rag&quot;:false}"
        data-tts-voice-language="en-US"
        data-tts-voice-gender="female"
        async>
</script>

WordPress

Add to theme footer.php or use a plugin

<!-- Add to footer.php before </body> tag -->
<!-- Adjust plan-tier and capabilities according to your subscription -->
<script src="https://widget.chatvix.com/widget.js" 
        data-tenant="YOUR_TENANT_ID" 
        data-chatbot="YOUR_CHATBOT_ID"
        data-plan-tier="starter"
        data-capabilities="{&quot;chat&quot;:true,&quot;tts&quot;:false,&quot;live&quot;:false,&quot;rag&quot;:false}"
        data-tts-voice-language="en-US"
        data-tts-voice-gender="female"
        async>
</script>

React

Use useEffect hook

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://widget.chatvix.com/widget.js';
    script.setAttribute('data-tenant', 'YOUR_TENANT_ID');
    script.setAttribute('data-chatbot', 'YOUR_CHATBOT_ID');
    script.setAttribute('data-plan-tier', 'starter');
    script.setAttribute('data-capabilities', '{"chat":true,"tts":false,"live":false,"rag":false}');
    script.setAttribute('data-tts-voice-language', 'en-US');
    script.setAttribute('data-tts-voice-gender', 'female');
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return <div>Your App</div>;
}

Next.js

Use Next.js Script component

import Script from 'next/script';

export default function Layout({ children }) {
  return (
    <>
      {children}
      <Script
        src="https://widget.chatvix.com/widget.js"
        data-tenant="YOUR_TENANT_ID"
        data-chatbot="YOUR_CHATBOT_ID"
        data-plan-tier="starter"
        data-capabilities='{"chat":true,"tts":false,"live":false,"rag":false}'
        data-tts-voice-language="en-US"
        data-tts-voice-gender="female"
        strategy="afterInteractive"
      />
    </>
  );
}

Shopify

Add to theme.liquid

<!-- In theme.liquid, before </body> tag -->
<!-- Adjust plan-tier and capabilities according to your subscription -->
<script src="https://widget.chatvix.com/widget.js" 
        data-tenant="YOUR_TENANT_ID" 
        data-chatbot="YOUR_CHATBOT_ID"
        data-plan-tier="starter"
        data-capabilities="{&quot;chat&quot;:true,&quot;tts&quot;:false,&quot;live&quot;:false,&quot;rag&quot;:false}"
        data-tts-voice-language="en-US"
        data-tts-voice-gender="female"
        async>
</script>

Wix

Custom Code section

<!-- Settings → Advanced → Custom Code → Footer -->
<!-- Adjust plan-tier and capabilities according to your subscription -->
<script src="https://widget.chatvix.com/widget.js" 
        data-tenant="YOUR_TENANT_ID" 
        data-chatbot="YOUR_CHATBOT_ID"
        data-plan-tier="starter"
        data-capabilities="{&quot;chat&quot;:true,&quot;tts&quot;:false,&quot;live&quot;:false,&quot;rag&quot;:false}"
        data-tts-voice-language="en-US"
        data-tts-voice-gender="female"
        async>
</script>

⚠️ Important Notes

  • Always place the script tag before the closing </body> tag
  • Replace YOUR_TENANT_ID and YOUR_CHATBOT_ID with your actual IDs
  • The widget loads asynchronously and won't block your page load
  • Adjust data-plan-tier, data-capabilities, ו־data-tts-voice-* לפי התוכנית והקול שהגדרת ב־CRM
  • Clear your browser cache if the widget doesn't appear immediately
  • If your site uses a Content Security Policy (CSP), allow https://widget.chatvix.com for script-src, style-src, img-src, font-src, and connect-src
  • If you use AI Forms: You MUST also add https://app.chatvix.com to your frame-src directive, otherwise forms will be blocked by CSP

🛡️ Example CSP Configuration

Add the widget domain to your CSP header to prevent the browser from blocking the script:

Content-Security-Policy: 
  script-src 'self' https://widget.chatvix.com ...;
  style-src 'self' https://widget.chatvix.com ...;
  img-src 'self' https://widget.chatvix.com ...;
  font-src 'self' https://widget.chatvix.com ...;
  connect-src 'self' https://widget.chatvix.com ...;
  frame-src 'self' https://app.chatvix.com https://widget.chatvix.com ...;

🚨 Critical for AI Forms:

If you use AI Forms in your chatbot, you MUST add https://app.chatvix.com to your frame-src directive. Without this, forms will be blocked by the browser's Content Security Policy and will not display in the chat widget.

Example CSP Configuration for AI Forms:

frame-src 'self' https://app.chatvix.com https://js.stripe.com ...;

Why? AI Forms are loaded in an iframe from app.chatvix.com. Your website's CSP must explicitly allow this domain in the frame-src directive.

Replace ... with your existing allowed domains.

Having installation issues?