My Website

> ## Documentation Index > Fetch the complete documentation index at: https://docs.emplorium.io/llms.txt > Use this file to discover all available pages before exploring further. # Install the chat widget > Add one script to your website so visitors can chat with your team and with Aura AI. The chat widget is how visitors reach you: it shows on your website, and every chat lands in your [Inbox](https://docs.emplorium.io/inbox/overview.md). Installing it takes one script, added once to your site. ![The Installation page with platform tabs, the widget code and the installed status](https://mintcdn.com/emplorium/ugrIr0OwIbcsQUR_/images/get-started/installation.png?fit=max\&auto=format\&n=ugrIr0OwIbcsQUR_\&q=85\&s=10fb44dc3ba3844acf867eae6e9f16a9) Settings › Installation: pick your platform, copy the code, check it's live. ## Install it **1. Open Settings › Installation** In the dashboard, open **Settings**, then **Installation** under **For developers**. Your widget code is already filled in with your account ID. **2. Pick your platform** Choose **Code snippet**, **React**, **Next.js**, **Vue**, **Nuxt**, **Angular** or **HTML**. Each one shows the code in the form that platform needs. **3. Add the code** Click **Copy** and paste the code into your website, just before the closing `` tag on every page (see your platform below). **4. Check it's live** Open your website. Once the widget loads there, **Settings › Installation** shows it as **Installed**, with the domain it's live on. > [!TIP] > > Always copy the code from **Settings › Installation**: it carries your own account ID. The examples on this page use `YOUR_ACCOUNT_ID` in its place. ## Code for each platform > [tab] Any website > > Paste this just before the closing `` tag on every page. > > ```html theme={null} > > > ``` > [tab] React / Vite > > Add the script to `public/index.html` (or `index.html` with Vite), just before the closing `` tag. > > ```html theme={null} > > ``` > > > [!NOTE] > > > > Add the widget to your static HTML file, not inside a React component, so it loads once and stays between page changes. > [tab] Next.js > > **App Router:** add the `Script` component to your root layout. > > ```tsx app/layout.tsx theme={null} > import Script from "next/script"; > > export default function RootLayout({ children }: { children: React.ReactNode }) { > return ( > > > {children} > {/* Emplorium Chat Widget (do not remove) */} > > ``` > [tab] Nuxt > > Add the script to the app head in `nuxt.config.ts`. > > ```ts nuxt.config.ts theme={null} > export default defineNuxtConfig({ > app: { > head: { > script: [ > { > src: "https://widget-service.emplorium.io/loader.min.js", > async: true, > "data-account-id": "YOUR_ACCOUNT_ID", > }, > ], > }, > }, > }); > ``` > [tab] Angular > > Add the script to `src/index.html`, just before the closing `` tag. > > ```html theme={null} > > ``` > [tab] HTML > > Add the script to each HTML page, just before the closing `` tag. > > ```html theme={null} > > > > > My Website > > > > > > > > ``` ## Website builders Builders don't appear in **Settings › Installation**, but the same snippet works anywhere you can add custom code before ``. Menu names can change as builders update their apps. > [accordion] WordPress > > Use a header-and-footer code plugin (for example WPCode) and paste the snippet into the **footer** box, or add it to your theme's `footer.php` just before ``. > [accordion] Shopify > > Go to **Online Store › Themes**, open **Edit code** on your live theme, open `layout/theme.liquid` and paste the snippet just before ``. > [accordion] Webflow > > Open **Site settings › Custom code** and paste the snippet into **Footer code**, then publish the site. > [accordion] Wix > > Open **Settings › Custom code**, add the snippet to **All pages**, and place it in **Body - end**. > [accordion] Framer > > Open **Site settings › General › Custom code** and paste the snippet into **End of `` tag**, then publish. ## Troubleshooting > [accordion] The widget doesn't show on my site > > * Check the snippet is on the page: view the page source and search for `loader.min.js`. > * Make sure `data-account-id` is your own ID: copy the code again from **Settings › Installation**. > * Clear your site's cache (and any CDN cache), then reload. > [accordion] Settings › Installation still says Not installed > > The status changes once the widget has loaded on your website at least once. Open a page where you added the code, wait for the widget to appear, then come back to the dashboard. > [accordion] The widget shows twice > > The snippet is on the page twice, often once in a theme and once in a plugin. Keep only one. ## Next steps > [card] [Customize the widget](https://docs.emplorium.io/widget/customize.md) > > Match its colours, position and messages to your brand. > [card] [Train Aura AI](https://docs.emplorium.io/aura/train.md) > > Let Aura answer visitors from your own content, day or night. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.