Install Valerie
Add Valerie to your website with a single line of code. Works with any platform, loads asynchronously, and has zero impact on performance.
Universal Install Snippet
Copy this code and paste it before the closing </body> tag on every page:
<script src="https://talktovalerie.com/valerie/v1.js" data-site-id="YOUR_SITE_ID" async></script>Replace YOUR_SITE_ID with your actual site ID from the dashboard.
Platform-Specific Instructions
Plain HTML
Add the script just before the closing </body> tag in your HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Your Website</title>
</head>
<body>
<!-- Your content -->
<script src="https://talktovalerie.com/valerie/v1.js"
data-site-id="YOUR_SITE_ID"
async></script>
</body>
</html>React / Next.js
Next.js App Router: Add to your root layout.tsx using the Script component:
// app/layout.tsx
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Script
src="https://talktovalerie.com/valerie/v1.js"
data-site-id="YOUR_SITE_ID"
strategy="lazyOnload"
/>
</body>
</html>
)
}Next.js Pages Router: Add to _document.tsx:
// pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'
import Script from 'next/script'
export default function Document() {
return (
<Html>
<Head />
<body>
<Main />
<NextScript />
<Script
src="https://talktovalerie.com/valerie/v1.js"
data-site-id="YOUR_SITE_ID"
strategy="lazyOnload"
/>
</body>
</Html>
)
}Vue / Nuxt
Vue 3: Add to your index.html or App.vue:
<!-- public/index.html -->
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<div id="app"></div>
<script src="https://talktovalerie.com/valerie/v1.js"
data-site-id="YOUR_SITE_ID"
async></script>
</body>
</html>Nuxt 3: Add to nuxt.config.ts:
// nuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
script: [
{
src: 'https://talktovalerie.com/valerie/v1.js',
'data-site-id': 'YOUR_SITE_ID',
async: true
}
]
}
}
})WordPress
Multiple installation options: theme files, plugins, or GTM. See our detailed guide:
WordPress Installation GuideShopify
Add to theme.liquid or use for specific pages like product, cart, and post-purchase:
Shopify Installation GuideGoogle Tag Manager
Deploy through GTM for centralized management and consent mode support:
GTM Installation GuideConfiguration Options
Available data attributes
data-site-idYour unique site identifier
data-positionWidget position: bottom-right (default), bottom-left
data-delayDelay before showing widget (milliseconds)
data-debugEnable debug mode (logs to console)
Example with all options:
<script src="https://talktovalerie.com/valerie/v1.js" data-site-id="YOUR_SITE_ID" data-position="bottom-right" data-delay="3000" async> </script>
Verify Your Installation
Valerie Appears
Visit your website and look for the feedback button (usually in the bottom-right corner).
Check Console
Open browser DevTools (F12) and look for "Valerie loaded" in the console. No errors should appear.
Submit Test Feedback
Click the feedback button and submit a test response. Verify it appears in your Valerie dashboard.
Test on Mobile
Check that Valerie displays correctly on mobile devices and is easy to interact with.
Troubleshooting
Feedback button not appearing
Open DevTools (F12) → Console and check for errors. Common issues: (1) Site ID is wrong or missing, (2) Script placed inside <head> instead of before </body>, (3) JavaScript error on page preventing Valerie from loading.
Action: Verify site ID in Valerie dashboard matches your script
Script blocked by ad blocker
Some ad blockers (uBlock Origin, AdBlock Plus) may block third-party feedback scripts. This affects a small percentage of users.
Action: Test in incognito mode without extensions to confirm
Survey shows on wrong pages
By default, Valerie shows on all pages. Use URL targeting rules in your Valerie dashboard to control visibility per page.
Action: Configure targeting rules in Dashboard → Surveys → URL Targeting
Page load seems slower
The async attribute ensures the script loads in parallel and doesn't block rendering. Valerie's script is under 10KB gzipped. If you still see issues, check your other scripts.
Action: Run Lighthouse and check if Valerie appears in blocking resources (it shouldn't)
Not working on single-page app (SPA)
Valerie automatically detects route changes via History API and popstate events. If using a custom router, Valerie may need manual refresh on navigation.
Action: Most React/Vue/Angular apps work automatically—test before assuming an issue
Feedback isn't saving
Check the Network tab in DevTools for failed requests to talktovalerie.com. Common causes: CORS issues, network firewall, or VPN blocking requests.
Action: Look for red failed requests in Network tab when submitting feedback
Content Security Policy (CSP) blocking script
If your site uses CSP headers, you need to whitelist talktovalerie.com in your script-src and connect-src directives.
Action: Add talktovalerie.com to your CSP policy's script-src and connect-src
Ready to install?
Sign up to get your site ID, then follow the instructions above. Setup takes less than 2 minutes.