# Framer Source: https://docs.audyr.com/embed/framer Add the Audyr widget to your Framer site. ## Site-wide (recommended) Adding the script to your site settings loads the widget on every page. In the Framer editor, click the **Framer** icon in the top-left corner and select **Site Settings**. Navigate to the **General** tab and scroll down to the **Custom Code** section. Paste the script into the **End of `` tag** field. ```html theme={null} ``` Click **Publish** to push your changes live. ## Single page only To show the widget on one page instead of the whole site: 1. Select the page in the left panel. 2. Open **Page Settings** (click the gear icon next to the page name). 3. Scroll to **Custom Code** and paste the script into the **End of ``** field. 4. Publish your site. # HTML Source: https://docs.audyr.com/embed/html Add the Audyr widget to static sites and HTML pages. ## Standard HTML Add the script before the closing `` tag. To show the widget on every page, add it to your shared layout or template file. ```html title="index.html" theme={null} My Site ``` ## Webflow 1. Open your Webflow project and go to **Project Settings → Custom Code**. 2. Paste the script into the **Footer code** field. 3. Click **Save Changes** and republish your site. ```html title="Webflow — footer code" theme={null} ``` To show the widget on a single page only, use **Page Settings → Custom Code** instead of the site-wide footer. ## Squarespace 1. Go to **Settings → Advanced → Code Injection**. 2. Paste the script into the **Footer** field. 3. Click **Save**. ## Wix 1. In the Wix Editor, go to **Settings → Custom Code**. 2. Click **Add Custom Code** and paste the script. 3. Set placement to **Body — End** and apply it to **All Pages**. 4. Click **Apply**. # Embed the widget Source: https://docs.audyr.com/embed/overview Add the Audyr widget to your website with a single script tag. The Audyr widget loads asynchronously — it won't affect your page speed or rendering. ## Quick install Paste this snippet before the closing `` tag on every page where you want the widget to appear: ```html theme={null} ``` That's it. No build step, no package to install. ## Your token The `data-token` attribute identifies your Audyr workspace. You can find your token in your [Audyr dashboard](https://app.audyr.com). ## Choose your environment Static sites and any page with direct HTML access — including Webflow, Squarespace, and Wix. Vite, Create React App, Next.js App Router, and Next.js Pages Router. Vue 3 applications and Nuxt 3 projects. WordPress themes, child themes, and WooCommerce sites. Framer sites via Site Settings or per-page custom code. Shopify stores via the theme editor or theme.liquid. # React / Next.js Source: https://docs.audyr.com/embed/react Add the Audyr widget to React and Next.js applications. ## React (Vite or Create React App) Add the script to your `index.html` file. This loads the widget on every page of your app. ```html title="index.html (Vite)" theme={null}
``` ```html title="public/index.html (Create React App)" theme={null}
``` ## Next.js — App Router Use the `next/script` component in your root layout. The `afterInteractive` strategy loads the widget once the page is interactive, so it won't block rendering. ```tsx title="app/layout.tsx" theme={null} import Script from 'next/script' export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ``` Click **Save**. The widget will appear on your storefront immediately. ## theme.liquid (all pages) To load the widget across your entire store, edit your theme's `theme.liquid` file directly. In your Shopify admin, go to **Online Store → Themes**. Click the **three-dot menu** next to your active theme and select **Edit code**. Under the **Layout** folder, click **theme.liquid**. Find the closing `` tag and paste the script directly before it. ```html title="layout/theme.liquid" theme={null} ``` Click **Save**. The widget will now load on every page of your store. If you're using a third-party theme, consider editing a child theme or duplicating the theme before making code changes. # Vue / Nuxt Source: https://docs.audyr.com/embed/vue Add the Audyr widget to Vue 3 and Nuxt 3 applications. ## Vue 3 The simplest approach is to add the script directly to your `index.html`. It will load on every page of your app. ```html title="index.html" theme={null}
``` If you need to load the widget programmatically — for example, based on a condition — you can inject it in `App.vue` using `onMounted`: ```vue title="App.vue" theme={null} ``` ## Nuxt 3 Use `useHead` in `app.vue` to inject the script globally across all pages: ```vue title="app.vue" theme={null} ``` Alternatively, configure it in `nuxt.config.ts` to apply it site-wide without touching `app.vue`: ```ts title="nuxt.config.ts" theme={null} export default defineNuxtConfig({ app: { head: { script: [ { src: 'https://app.audyr.com/widget/widget.min.js', 'data-token': 'YOUR_TOKEN', defer: true, }, ], }, }, }) ``` # WordPress Source: https://docs.audyr.com/embed/wordpress Add the Audyr widget to your WordPress site. ## Using a plugin (recommended) The easiest way to add the widget without editing theme files is with the [Insert Headers and Footers](https://wordpress.org/plugins/insert-headers-and-footers/) plugin. In your WordPress admin, go to **Plugins → Add New**, search for **Insert Headers and Footers**, and click **Install Now**, then **Activate**. Go to **Settings → Insert Headers and Footers**. Paste the script into the **Scripts in Footer** field. ```html theme={null} ``` Click **Save**. The widget will now appear on every page of your site. ## Using functions.php If you prefer to keep the widget inside your theme, add this to your `functions.php`: ```php title="functions.php" theme={null} function audyr_widget_script() { echo ''; } add_action( 'wp_footer', 'audyr_widget_script' ); ``` Edit `functions.php` in a child theme. Changes to a parent theme's files are overwritten whenever the theme updates. ## WooCommerce — specific pages only To load the widget only on certain WooCommerce pages, use conditional tags in `functions.php`: ```php title="functions.php" theme={null} function audyr_widget_script() { if ( is_checkout() || is_cart() ) { echo ''; } } add_action( 'wp_footer', 'audyr_widget_script' ); ``` Swap `is_checkout()` and `is_cart()` for any [WordPress conditional tag](https://developer.wordpress.org/themes/basics/conditional-tags/) to target the pages you need.