Integrations

Add QuerySafe to Any Website

One line of code. Works on WordPress, Shopify, Wix, Squarespace, React, or plain HTML.

codeYour Embed Code

After training your chatbot, you will get a unique embed code from your dashboard. It looks like this:

<script src="https://console.querysafe.ai/widget/YOUR_BOT_ID/querySafe.js"></script>

Replace YOUR_BOT_ID with your actual chatbot ID from the dashboard.

WordPress

  1. Log in to your WordPress admin panel.
  2. Go to Appearance > Theme File Editor (or use a plugin like "Insert Headers and Footers").
  3. Open the footer.php file (or the "Footer Scripts" section in the plugin).
  4. Paste your embed code just before the closing </body> tag.
  5. Click Update File (or Save in the plugin).
  6. Visit your site and verify the chat widget appears in the bottom-right corner.
lightbulb Tip: If you use a page builder (Elementor, Divi), you can also add the script via the theme's Custom Code or a Custom HTML widget in the footer area.

Shopify

  1. From your Shopify admin, go to Online Store > Themes.
  2. Click Actions > Edit code on your active theme.
  3. In the Layout folder, open theme.liquid.
  4. Scroll to the bottom and find the </body> tag.
  5. Paste your embed code just before </body>.
  6. Click Save and preview your store.
lightbulb Tip: The widget works on all pages including product pages, cart, and checkout (if allowed by your theme).

Wix

  1. Go to your Wix dashboard and open your site editor.
  2. Click Settings (gear icon) in the left menu.
  3. Select Custom Code under the Advanced section.
  4. Click + Add Custom Code.
  5. Paste your embed code, name it "QuerySafe Chatbot".
  6. Set placement to Body - end and apply to All pages.
  7. Click Apply and publish your site.

Squarespace

  1. In your Squarespace dashboard, go to Settings > Advanced > Code Injection.
  2. Paste your embed code in the Footer section.
  3. Click Save.
  4. The widget will appear on all pages of your site.

React / Next.js

Add the script using a useEffect hook in your root component or layout:

useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://console.querysafe.ai/widget/YOUR_BOT_ID/querySafe.js';
  script.async = true;
  document.body.appendChild(script);
  return () => document.body.removeChild(script);
}, []);

Plain HTML

  1. Open your HTML file in any code editor.
  2. Paste the embed code just before the closing </body> tag.
  3. Save the file and open it in your browser.
<!DOCTYPE html>
<html>
<head>...</head>
<body>
  <!-- Your content -->

  <script src="https://console.querysafe.ai/widget/YOUR_BOT_ID/querySafe.js"></script>
</body>
</html>
FAQ

Integration Questions

Common questions about adding QuerySafe to your site

Copy the embed script from your QuerySafe dashboard and paste it before the closing </body> tag on your website. It works on any platform — WordPress, Shopify, Wix, Squarespace, React, or plain HTML. One line of code, no plugins required.

No. The script loads asynchronously, so it does not block your page from rendering. The widget itself is lightweight and only activates when a visitor clicks on it.

Yes. Place the embed code in your site's global footer or layout template, and the chatbot will appear on every page. You do not need separate codes for different pages.

Yes. You can add the script tag to your index.html or load it inside a useEffect hook in your root component. The widget handles route changes automatically.

Ready to Add AI Chat to Your Website?

Create your chatbot, train it, and embed it in under 5 minutes.

Get Started Free