# Install the widget (/docs/installing/install-the-widget) You'll find your snippet, already filled in with your agent ID, on the agent's **Install** tab. Add it once, in the part of your app that every page shares, and the widget appears on every screen. For any website, WordPress, Webflow, Shopify, or server-rendered templates such as Rails, Django, Laravel or NestJS views. Add it once in the shared layout, just before ``. ```html ``` `defer` lets your page appear without waiting for the widget, so it doesn't slow your page down or lower its PageSpeed score. Install the package, then wrap your app once at the root. It cleans up after itself and works with React's strict mode. ```bash npm install @skavelo/sdk ``` ```tsx title="main.tsx" import { SkaveloProvider } from '@skavelo/sdk/react'; root.render( , ); // Anywhere inside: const { open, ask } = useSkavelo(); ``` Install the package, then render a small client component once in the root layout. On the server it does nothing. ```bash npm install @skavelo/sdk ``` ```tsx title="app/skavelo.tsx" 'use client'; import { SkaveloProvider } from '@skavelo/sdk/react'; export function Skavelo({ children }: { children: React.ReactNode }) { return {children}; } ``` ```tsx title="app/layout.tsx" import { Skavelo } from './skavelo'; export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ); } ``` Install the package, then start Skavelo when the root component mounts. ```bash npm install @skavelo/sdk ``` ```vue title="App.vue" ``` Install the package, then add a client-only plugin. Nuxt loads it in the browser on every page. ```bash npm install @skavelo/sdk ``` ```ts title="plugins/skavelo.client.ts" import { Skavelo } from '@skavelo/sdk'; export default defineNuxtPlugin(() => { Skavelo.init({ agentId: 'YOUR_AGENT_ID' }); }); ``` Install the package, then start Skavelo in the root layout so it runs once for the whole app. In SvelteKit, that's `src/routes/+layout.svelte`. ```bash npm install @skavelo/sdk ``` ```svelte title="+layout.svelte" ``` Install the package, then start Skavelo in the root component after the first render, so it's safe with server rendering. ```bash npm install @skavelo/sdk ``` ```ts title="app.component.ts" import { Component, afterNextRender } from '@angular/core'; import { Skavelo } from '@skavelo/sdk'; @Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent { constructor() { afterNextRender(() => Skavelo.init({ agentId: 'YOUR_AGENT_ID' })); } } ``` No code changes needed. Add a **Custom HTML** tag with the snippet below, set it to fire on **All Pages**, then publish the container. ```html ``` ## Check that it's working [#check-that-its-working] Open your app in a browser. The widget's launcher appears at the bottom of the page, and the agent's **Install** tab confirms that Skavelo has loaded on your site. If the widget doesn't appear: - Check that your site is in the agent's [allowed sites](/docs/installing/allowed-sites). The browser console shows a message from Skavelo if it isn't. - Check the agent's [Targeting](/docs/customizing/targeting). The widget only appears on pages and for users its rules allow. - Make sure the snippet runs on the page, for example that it isn't inside a template only some pages use. ## Asking a developer to install it [#asking-a-developer-to-install-it] If someone else manages your codebase, click **Email the install steps** on the Install tab. They'll receive the snippets for every platform, and their replies come to you. The widget renders inside its own isolated layer (a Shadow DOM), so your styles can't change it and its styles can't leak into your app. It works for signed-out visitors too.