Add Your Domain in the Dashboard
Log in to the PeekDesk dashboard and add your domain in the Domains tab. The domain is verified automatically — no API key is needed in the code.
Choose Your Platform
Click the tab matching your platform to see step-by-step instructions.
Open your HTML file
Find the HTML file of your page (e.g. index.html) in any code editor. Search for the closing </body> tag.
Paste the widget code before </body>
Copy the snippet below and paste it just before the closing </body> tag:
<script async src="https://peekdesk.com/w.js"></script>
The domain is verified automatically based on your dashboard settings. No API key needed.
Save and verify
After saving the file, refresh the page. A green "Live Help" button should appear in the bottom right corner.
Full HTML file example:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My Website</title> </head> <body> <h1>Welcome to our website</h1> <script async src="https://peekdesk.com/w.js"></script> </body> </html>
Go to the Theme Editor
In the WordPress dashboard, go to Appearance → Theme Editor → select the footer.php file (or Footer).
Paste the widget code
Find the closing </body> tag in footer.php and paste before it:
<script async src="https://peekdesk.com/w.js"></script>
Save the file and check the site
Click Update File, then visit your site. A green button should appear in the corner.
If you don't want to edit theme files, you can use the free WPCode (Insert Headers and Footers) plugin:
1. Install the WPCode plugin from the WordPress repository
2. Go to Code Snippets → Header & Footer
3. Paste the widget code in the Footer section
4. Save changes
Open the theme code editor
In the Shopify admin, go to Online Store → Themes → click Actions → Edit code.
Find the theme.liquid file
In the file panel on the left, find and click Layout → theme.liquid.
Paste code before </body>
Scroll to the bottom of the theme.liquid file, find </body> and paste before it:
<script async src="https://peekdesk.com/w.js"></script>
Click Save in the top right corner.
Go to Custom Code settings
In the Wix dashboard, go to Settings → Custom Code.
Add a new code snippet
Click the "+ Add Custom Code" button in the top right corner.
Paste the code and set position
Paste the code below into the text field. In the "Place Code in" section, select: Body — end. Click Apply.
<script async src="https://peekdesk.com/w.js"></script>
Open the GTM container
Log in to Google Tag Manager and select your container.
Create a new Custom HTML tag
Click Tags → New. Select Custom HTML as the tag type.
Paste the widget code
Paste in the HTML field:
<script async src="https://peekdesk.com/w.js"></script>
Add a trigger
In the Triggering section, select All Pages so the widget appears on every page.
Save and publish
Click Save, then Submit (button in the top right corner) to make the changes live.
Open the template editor
In the PrestaShop panel, go to Design → Theme. Find and edit the footer.tpl file (path: themes/your-theme/templates/_partials/footer.tpl).
Add the widget code
At the end of the footer.tpl file (before closing tags), paste:
<script async src="https://peekdesk.com/w.js"></script>
Save and clear cache
Save the file, then go to Advanced → Performance and click Clear cache to make the changes visible.
Create a hook or component
In SPA applications (React, Next.js, Vue, Angular), the widget should be loaded dynamically. Here's an example for React using the useEffect hook:
// components/PeekDeskWidget.jsx import { useEffect } from 'react'; export default function PeekDeskWidget() { useEffect(() => { const script = document.createElement('script'); script.src = 'https://peekdesk.com/w.js'; script.async = true; document.body.appendChild(script); return () => { // Cleanup on unmount document.body.removeChild(script); const widget = document.getElementById('peekdesk-widget'); if (widget) widget.remove(); }; }, []); return null; }
Use the component in your app
Add the component to your main layout (e.g. App.jsx or layout.tsx):
// App.jsx or layout.tsx import PeekDeskWidget from './components/PeekDeskWidget'; function App() { return ( <> {/* rest of your application */} <PeekDeskWidget /> </> ); }
Done — no additional configuration needed
PeekDesk widget automatically handles URL changes in SPA applications (listens to popstate and DOM mutations), so no additional configuration is needed.
In Next.js, you can use the <Script> component instead of useEffect:
// app/layout.tsx import Script from 'next/script'; export default function RootLayout({ children }) { return ( <html> <body> {children} <Script src="https://peekdesk.com/w.js" strategy="afterInteractive" /> </body> </html> ); }
After Installation
Verification
After adding the code, refresh the page. If the widget works correctly, you'll see a green "Live Help" button in the corner of the page. Click it to test the connection.
Customization
All widget settings (button text, position, color, icon, language, theme) are configured in the Dashboard → API Key. The snippet is minimal and requires no data attributes.
Domain Authorization
Remember to add your website domain in the PeekDesk dashboard (Dashboard → Domains). The widget will only work on authorized domains.
Need Help?
If you have trouble with integration, email us at hello@peekdesk.com — we respond within 24 hours.
Don't have an account yet?
Create a free account and add co-browsing to your website in minutes.
Create Account — Free