Skip to content
chatyol

Docs / Getting started

Install the widget

Add the Chatyol chat widget to any website with one script tag, with notes for WordPress, Shopify, React, Next.js, Vue, Laravel and more.

The snippet

The whole integration is one line. Copy it from Settings → Websites → Install in Chatyol; it carries your website's public key.

html
<script src="https://cdn.chatyol.com/widget.js" data-key="pk_your_key" async></script>
  • Load it once for the whole site, as late as possible: before </body>, with async.
  • The public key is safe to publish. Chatyol only accepts it from pages on your website's domain and its subdomains.
  • The widget renders in its own Shadow DOM, so your CSS and the widget never affect each other.

Where to put it

Platform Where
HTML, any website Before </body> on every page, or in the shared footer
React (Vite, Create React App) index.html (public/index.html in CRA), before </body>. Not in a component, not in useEffect
Next.js App Router app/layout.tsx with next/script and strategy="afterInteractive"
Next.js Pages Router The same <Script> in pages/_app.tsx
Vue (Vite) index.html before </body>
Nuxt 3 nuxt.config.ts, app.head.script
Angular src/index.html before </body>
WordPress The free WPCode plugin: Code Snippets → Header & Footer → Footer. Or wp_footer in a child theme
Shopify Online Store → Themes → Edit code → layout/theme.liquid, before </body>
Wix Settings → Custom code → Body - end, all pages
Webflow Site settings → Custom code → Footer code
Squarespace Settings → Advanced → Code injection → Footer
Framer Site settings → General → Custom code → End of <body>
Laravel (Blade) Your main layout, before </body>, with the key in .env
Google Tag Manager Tags → New → Custom HTML, trigger All Pages

Custom code needs a paid plan on some site builders.

Next.js

tsx
import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script src="https://cdn.chatyol.com/widget.js" data-key="pk_your_key" strategy="afterInteractive" />
      </body>
    </html>
  );
}

Nuxt 3

ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [{ src: 'https://cdn.chatyol.com/widget.js', 'data-key': 'pk_your_key', async: true, tagPosition: 'bodyClose' }],
    },
  },
});

WordPress (child theme)

php
add_action('wp_footer', function () {
    echo '<script src="https://cdn.chatyol.com/widget.js" data-key="pk_your_key" async></script>';
});

Laravel

php
// .env
CHATYOL_KEY=pk_your_key

// config/services.php
'chatyol' => ['key' => env('CHATYOL_KEY')],
html
<script src="https://cdn.chatyol.com/widget.js" data-key="{{ config('services.chatyol.key') }}" async></script>
</body>

Options on the script tag

Attribute What it does
data-key Your website's public key. Required
data-lang Force a language: en, ar, fr, pt, es or id
data-position left or right, to override the side set in Chatyol

Content Security Policy

Only if your site sends one. Add these sources to your existing policy:

  • script-src https://cdn.chatyol.com
  • connect-src https://api.chatyol.com wss://api.chatyol.com
  • img-src https://cdn.chatyol.com https://api.chatyol.com https://app.chatyol.com data: blob:

Check it works

  1. Open any page of your site: a chat bubble appears in the bottom corner.
  2. In the browser console, typeof window.Chatyol is "object".
  3. In Chatyol, the website's install card says when the widget was first seen on your domain.

On localhost the bubble loads, but sending says the chat isn't available on this site. That's expected: the key only works on your website's domain. Add staging domains in Chatyol under Settings → Websites.

Don't

  • Don't add npm packages, iframes or wrappers; the script is the whole integration.
  • Don't copy widget.js into your project; always load it from cdn.chatyol.com.
  • Don't add it twice. A second copy does nothing, but keep the code clean.

Something unclear or out of date? Email support@chatyol.com.