Skip to content
English
  • There are no suggestions because the search field is empty.

⚙️ How do I embed the Xplorie widget?

Regardless of your CMS or website builder, we have provided step-by-step instructions to embed the Xplorie widget on your website. 

Getting Started

Before you start, you will need to copy the snippet (see example below) exactly as provided by your Client Success manager. 

Where to place it: Put the tag where you want the widget to appear in the page markup. If you don’t care about exact placement, a safe default is directly above </body> so it loads after the rest of your content. 

Example snippet:
<script defer data-widget-id="265" src="https://cdn.xplorie.com/js/widget.js"></script>

 

 

Select your Website Builder or CMS

⚠️ Quick checks & troubleshooting

Once the snippet is embedded, make sure to check the page to ensure the widget renders as expected. 
Review our troubleshooting tips if you encounter any issues. 

 

WordPress site

Option 1) On a single page/post (Block Editor/Gutenberg):
    1. Edit the page → add a Custom HTML block where you want the widget to be displayed on the page.
    2. Paste the script → Update the page.

Option 2) Site-wide (every page): 
Site Editor: Appearance → Editor → open template → add a Custom HTML block → paste the script → Save.

💡 Pro Tip: If you place it in a template, it will render on every page that uses that template. 


 ⬆️ Back to top

 

Site builders (Squarespace / Wix / Webflow / etc.)

If your website is provided by your PMS, try these steps. 

  1. Use their Code/Embed block (or “Custom Code” → Injector) and paste the script.
  2. Place the block exactly where you want the widget to render. 

 ⬆️ Back to top

 

Google Tag Manager (GTM)

  1. Tags → New → Tag Type: Custom HTML.
  2. Paste the script exactly.
  3. Set Trigger: All Pages (or specific pages/conditions).
  4. Save → Submit → Publish.

💡 Pro Tip: In GTM, the snippet can stay as-is; defer is fine. If you only want it on some URLs, use a Page View trigger with URL match rules.

 ⬆️ Back to top

 

Plain HTML site

  1. Open the page’s HTML file.
  2. Paste the snippet where the widget should render (or just before </body>).
  3. Save and upload/deploy the file.
Minimal example:
<!doctype html>
<html lang="en">
  <head>…</head>
  <body>
    <main>…your page…</main>
    <!-- Xplorie widget -->
    <script defer data-widget-id="265" src="https://cdn.xplorie.com/js/widget.js"></script>
  </body>
</html>

 ⬆️ Back to top

 

React / Vite / CRA

Easiest (index.html):
Add the tag to public/index.html (CRA) or the root index.html (Vite), typically before </body>.
<!-- public/index.html -->
<body>
  <div id="root"></div>
  <script defer data-widget-id="265" src="https://cdn.xplorie.com/js/widget.js"></script>
</body>
Programmatic (inside a component):
import { useEffect } from "react";
export default function XplorieWidget() {
  useEffect(() => {
    const s = document.createElement("script");
    s.src = "https://cdn.xplorie.com/js/widget.js";
    s.defer = true;
    s.setAttribute("data-widget-id", "265");
    document.body.appendChild(s);
    return () => { document.body.removeChild(s); };
  }, []);
  return null; // or return a container if the widget expects one
}

💡 Pro Tip:  For Single-Page Apps, ensure the script runs on the routes where you need the widget.

 ⬆️ Back to top

 

Next.js

Via next/script:
import Script from "next/script";
export default function Page() {
  return (
    <>
      {/* …page content… */}
      <Script
        src="https://cdn.xplorie.com/js/widget.js"
        strategy="afterInteractive"
        data-widget-id="265"
      />
    </>
  );
}

 ⬆️ Back to top

 

Vue

index.html approach (Vite):
<body>
  <div id="app"></div>
  <script defer data-widget-id="265" src="https://cdn.xplorie.com/js/widget.js"></script>
</body>
Programmatic in a component:
export default {
  mounted() {
    const s = document.createElement("script");
    s.src = "https://cdn.xplorie.com/js/widget.js";
    s.defer = true;
    s.setAttribute("data-widget-id", "265");
    document.body.appendChild(s);
  },
  unmounted() {
    // optional cleanup if you added it programmatically
  }
}

 ⬆️ Back to top

 

⚠️ Quick checks & troubleshooting

  • Correct ID: Make sure data-widget-id="###" matches what Xplorie provided for your site.
  • One include per page: Don’t paste the same script multiple times on the same page 
  • Placement controls rendering: If the widget appears in the wrong spot, move the tag to the desired location in the DOM.
  • CSP: If you use a Content Security Policy, allow https://cdn.xplorie.com in script-src.
  • HTTPS: Your page should load over HTTPS to avoid mixed-content issues.
  • Console/Network: Open DevTools → check Network for widget.js loading (200 OK) and Console for errors.
  • SPAs: If route changes unmount the widget, load/re-init on each route where it’s needed.

 ⬆️ Back to top

 

 

Additional Resources:

The Xplorie Widget: What is it?
Xplorie Widget Requests
How do I link my Xplorie widget?