Web embed

Add Janore to any site in 30 seconds.

One script tag. Auto-themes to your brand. Works on every framework, every CMS.

4 min readUpdated 2026-05-02v0.5

1. Paste the snippet

Drop this anywhere inside <body>. Most teams put it just before the closing tag.

snippet.html— html

1<script async src="https://janore.com/v1/embed/{ASSISTANT_ID}.js"></script>

Replace {ASSISTANT_ID} with the id shown next to your assistant in the dashboard.

2. Find your assistant id

Open Dashboard → Assistants. Each assistant card shows its id and a one-click copy button. Treat it as public — it's safe to expose in client code. Dashboard → Assistants.

3. Customize the widget

All visual controls live in the dashboard Embed tab — open your assistant and click Embed next to Persona. Save, and the new look is live everywhere your snippet runs. No code change, no redeploy: the script tag in your <body> is the same forever.

What you can change

Position — bottom-right (default) or bottom-left.
Primary color — the launcher background and the user bubbles. Defaults to Janore amber #f59e0b.
Text color — body copy inside the panel.
Bubble color — assistant message bubble background.
Border radius — square (4px), soft (12px, default), pill (24px). Applies to the panel, bubbles, and the launcher.
Agent name override — appears in the panel header and avatar initials. Leave blank to use the assistant's saved name.
Greeting override (per locale) — first message visitors see. One slot per supported language (en / fr / es / ar). Empty slots fall back to the localized default.
Auto-open delay — 0–120 seconds. After this delay the panel pops open once, automatically. 0 disables (default).
Launch pulse — the subtle ring animation around the launcher. On by default; turn it off if your design language is calm.
“Powered by Janore” footer — required on the free / Starter tiers; Pro / Scale plans can hide it for full white-label.

The dashboard tab includes a live preview pane that re-renders as you tweak — what you see is what your visitors see.

4. Programmatic API

Once the script loads, Janore exposes a tiny global on window.Janore. Use it from your own buttons, route changes, marketing modals, or auth flows.

Methods

window.Janore— javascript

1window.Janore.open();     // expand the chat panel
2window.Janore.close();    // collapse back to the launcher
3window.Janore.destroy();  // remove Janore entirely from the page

Trigger from your own button

Most teams replace their own “Contact us” or “Help” button with a Janore opener. Drop your own styled button anywhere and call Janore.open() on click.

trigger.html— html

1<button onclick="window.Janore.open()">
2  Talk to us
3</button>

Combine with our quick links feature to send the visitor straight to a pre-loaded prompt — useful for “Book a demo”, “Pricing question”, etc.

Close on route change (SPA)

spa.ts— typescript

1router.events.on('routeChangeComplete', () => {
2  window.Janore?.close();
3});

5. Multi-language

Janore supports English, French, Spanish, and Arabic out of the box. The widget chooses the visitor's language by:

Defaulting to your assistant's primary locale (set in Persona).
Auto-following the visitor's message — if someone writes in Arabic, replies switch to Arabic mid-conversation. No config needed.
Honouring the per-locale greeting override from the Embed tab when one is set.

Right-to-left languages (Arabic) are handled automatically — the panel mirrors and the chat bubbles align right.

6. Frameworks

Next.js

Use next/script with afterInteractive in your root layout.

app/layout.tsx— typescript

1import Script from 'next/script';
2 
3export default function RootLayout({ children }) {
4  return (
5    <html>
6      <body>
7        {children}
8        <Script
9          src="https://janore.com/v1/embed/{ASSISTANT_ID}.js"
10          strategy="afterInteractive"
11        />
12      </body>
13    </html>
14  );
15}

Vue / Nuxt

Add it in nuxt.config.ts under app.head.script.

nuxt.config.ts— typescript

1export default defineNuxtConfig({
2  app: {
3    head: {
4      script: [
5        { src: 'https://janore.com/v1/embed/{ASSISTANT_ID}.js', async: true },
6      ],
7    },
8  },
9});

Shopify

Open Online Store → Themes → Edit code, then paste the snippet just before </body> in theme.liquid. Save. Done.

WordPress

Either edit your theme's footer.php and paste the snippet before </body>, or use a plugin like Insert Headers and Footers and drop it into the footer field. No coding required.

Webflow

Go to Project Settings → Custom Code → Footer Code, paste the snippet, save, and republish.

Plain HTML

Paste the snippet anywhere inside <body>. That's the whole integration.

Privacy & GDPR

Janore is GDPR-baseline by default. We collect only the chat messages your visitors send, and the answers we return; no third-party trackers, no analytics cookies set by the embed itself. The widget runs inside an iframe served from janore.com, isolated from your host page's document.

Conversation transcripts are stored against your assistant in your dashboard for review and quality training. Visitors are anonymous unless your workflow explicitly captures an email or phone (escalation, lead-capture). For full data-handling details and DPA see our legal page. Get started

Troubleshooting

A grey rectangle appears around the launcher. Fixed in the 2026-05-01 release — the iframe defaults to a transparent body and a tightly-sized 80×80px footprint. If you still see a frame, hard-reload the embed snippet (cache may be stale; the loader sets stale-while-revalidate=86400).
Chat won't open. Most often a Content-Security-Policy issue. Allow our origins:
response-headers— http
```
1Content-Security-Policy:
2  script-src https://janore.com;
3  frame-src https://janore.com;
4  connect-src https://janore.com;
```
If your host page sets frame-ancestors to 'self', the iframe will be blocked. Allow https://janore.com there too.
Right-to-left languages (Arabic, Hebrew). Handled automatically. The panel detects the visitor's message language and flips the layout. No config needed.
Ad-blockers. A small slice of users block third-party iframes. Janore retries silently — no errors in console.
Wrong assistant id. Open the network tab; the script URL should return 200 OK. A 400 means the id is malformed.