\n\n\n\n4. Paste both lines just before the closing tag on every page where you want the chat bubble to appear. For most sites this means placing it in your global layout or footer template so it loads on all pages automatically.\n5. Save your changes and reload the page. The green chat bubble should appear in the bottom-right corner within a few seconds.\n\n WordPress\n\nUse the official Kerabie Live Chat WordPress plugin — it handles the script automatically and passes the logged-in user's details to the widget.\n\n1. In your WordPress admin, go to Plugins → Add New Plugin.\n2. Search for Kerabie Live Chat and click Install Now → Activate.\n3. Go to Settings → Kerabie Live Chat.\n4. Paste your Widget Key (found at Settings → Widget → Install Code in your Kerabie dashboard).\n5. Click Save Settings. Done — the widget appears on all pages immediately.\n\n Shopify\n\n1. In your Shopify admin, go to Online Store → Themes → Edit code.\n2. Open Layout → theme.liquid.\n3. Paste the Kerabie script snippet just before .\n4. Click Save.\n\n React / Next.js / Vue\n\nPlace the snippet in your root layout or _app component. For Next.js (App Router):\n\ntsx\n// app/layout.tsx\nexport default function RootLayout({ children }: { children: React.ReactNode }) {\n return (\n \n \n {children}\n \n\n\nThis automatically identifies the visitor in your dashboard so agents see their details without needing to ask."}}}
Kerabie
Kerabie
Getting Started

How do I add Kerabie to my website?

Last updated 29 October 2026 · 11 views

Adding Kerabie to your website only requires pasting a small JavaScript snippet. The whole process takes under five minutes.

Step-by-step: HTML / any website

1.Log in to your Kerabie dashboard.
2.Go to Settings → Widget → Install Code.
3.Copy the two-line script snippet shown in the panel. It looks like this:

4.Paste both lines just before the closing tag on every page where you want the chat bubble to appear. For most sites this means placing it in your global layout or footer template so it loads on all pages automatically.
5.Save your changes and reload the page. The green chat bubble should appear in the bottom-right corner within a few seconds.

WordPress

Use the official Kerabie Live Chat WordPress plugin — it handles the script automatically and passes the logged-in user's details to the widget.

1.In your WordPress admin, go to Plugins → Add New Plugin.
2.Search for Kerabie Live Chat and click Install Now → Activate.
3.Go to Settings → Kerabie Live Chat.
4.Paste your Widget Key (found at Settings → Widget → Install Code in your Kerabie dashboard).
5.Click Save Settings. Done — the widget appears on all pages immediately.

Shopify

1.In your Shopify admin, go to Online Store → Themes → Edit code.
2.Open Layout → theme.liquid.
3.Paste the Kerabie script snippet just before .
4.Click Save.

React / Next.js / Vue

Place the snippet in your root layout or _app component. For Next.js (App Router):

// app/layout.tsx

export default function RootLayout({ children }: { children: React.ReactNode }) {

return (

{children}

This automatically identifies the visitor in your dashboard so agents see their details without needing to ask.

Was this helpful?
Was this article helpful?
← Back to Help Center

Still need help?

Our support team typically responds within 24 hours on paid plans.