Skip to main content

​
1. Chat Widget Integration: Basic Snippet (HTML)

This is the most universal method for integrating the Emplorium chat widget into any standard HTML website.

​
Where to Find Your Snippet Code

  1. Log in to your Emplorium account.
  2. Navigate to Settings > For Developers > Installation Guide.
  3. Copy the provided JavaScript embed code.
Integration Pn

​
Snippet Code (HTML)

<script type="text/JavaScript">
  ((function(){
    var loadWidget = function(){
      var script = "https://widget-service-dev.emplorium.io/acc-9700d/init.js";
      var x = document.createElement('script');
      var sx = document.getElementsByTagName('script')[0];
      x.src = script; x.async = true;
      sx.parentNode.insertBefore(x, sx);

      fetch("https://auth-service-dev.emplorium.io/widget-init-status", {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ accountID: "9700d" })
      }).catch(function(error) {
        console.error('Widget installation status update failed:', error);
      });
    }
    if(document.readyState === "complete") {
      loadWidget();
    } else if (window.addEventListener){
      window.addEventListener('load', loadWidget, false);
    } else if (window.attachEvent){
      window.attachEvent("onload", loadWidget);
    }
  })())
</script>

​
Placement

Paste this entire snippet just before the closing </head> tag of your website’s HTML file. This ensures the widget loads asynchronously without blocking your page content.

​
React Integration

​
Option A: Embed Script in public/index.html

  1. Open your React project.
  2. Edit public/index.html and add the snippet above just before </head>.
  3. Save and run your app (npm start).
  4. Confirm widget loads at http://localhost:3000.

​
Option B: Install Emplorium Choose your preferred package manager

npm install emplorium
Use in your component: 
import { EmploriumWidget } from 'emplorium';

function App() {
  return (
    <div>
      <h1>Your React App</h1>
      <EmploriumWidget accountID="acc-9700d" />
    </div>
  );
}
export default App;

​
Angular Integration

​
Option A: Script Embed

  1. Modify src/index.html, insert widget snippet before </head>.
  2. Run app with Angular CLI: ng serve.
  3. Verify widget at http://localhost:4200.

​
Option B: SDK Installation

npm install emplorium-angular

​
Usage:

import { EmploriumWidgetComponent } from 'emplorium-angular';

<emplorium-widget [accountID]="'acc-9700d'"></emplorium-widget>

​
Optional: ngsw-config.json Example

{
  "assetGroups": [
    {
      "name": "widget-assets",
      "installMode": "lazy",
      "resources": {
        "urls": ["https://widget-service-dev.emplorium.io/*"]
      }
    }
  ]
}

​
Vue.js Integration

​
Option A: Embed Script

  1. Insert the widget script in public/index.html before </head>.
  2. Run Vue CLI app: npm run serve.
  3. Verify widget loads at http://localhost:8080.

​
Option B: Install SDK

npm install emplorium-vue

​
Register in main.js

import { createApp } from 'vue';
import App from './App.vue';
import { EmploriumWidget } from 'emplorium-vue';

const app = createApp(App);
app.component('EmploriumWidget', EmploriumWidget);
app.mount('#app');

​
Usage in template:

<template>
  <EmploriumWidget accountID="acc-9700d" />
</template>

​
Next.js Integration

​
Option A: Script File

  1. Create public/EmploriumWidget.js and paste widget script inside.
  2. In your _app.js or layout:
<Script src="/EmploriumWidget.js" strategy="beforeInteractive" />

​
Option B: SDK Installation

npm install emplorium

import { EmploriumWidget } from 'emplorium';

function App() {
  return <EmploriumWidget accountID="acc-9700d" />;
}

​
CMS & No-Code Platforms

For content management systems and no-code platforms, you’ll typically use the standard HTML snippet code and paste it into a designated “custom code” or “header script” section.

​
WordPress

  1. Install a plugin like “Insert Headers and Footers” (or similar, from the WordPress Plugin Directory)
  2. Go to Settings → Insert Headers and Footers in your WordPress admin dashboard.
  3. Paste the basic HTML snippet code into the “Scripts in Header” section
  4. Save your changes and reload your WordPress site to see the widget.

​
Shopify

  1. Navigate to Online Store → Themes → Edit Code.
  2. Edit theme.liquid.
  3. Insert widget script before </head>.

​
Webflow

  1. Go to Project Settings → Custom Code.
  2. Add the widget script to Head Code.
  3. Save and publish your site.

​
Wix

  1. Edit site → Add → Embed Code → Embed a Widget.
  2. Paste the widget script.
  3. Adjust position and publish.

​
Framer

  1. Open Framer and go to the Code tab.
  2. Add the widget script as a custom block.
  3. Save and publish your project.

​
Final Checklist for Successful Installation

Before concluding, double-check these common points to ensure your Emplorium widget is installed correctly:
  • ✅ The Emplorium widget script is placed correctly: before </head> or </body> depending on setup
  • On the same page in emplorium’s integration settings, click the “Check Installation” button to check if emplorium detected the installation.
  • ✅ Your unique Emplorium Account ID (acc-9700d in examples) is correctly inserted in the snippet or SDK component
  • ✅ Ensure that any fetch status calls (if part of your snippet for reporting installation) are not being blocked by browser extensions or ad-blockers during testing (though this usually doesn’t affect widget functionality).
  • ✅ Check your browser’s developer console for any JavaScript errors after loading the page with the widget.

​
Need Help?

If you encounter any issues during the installation process, don’t hesitate to:
  • Contact Emplorium Support: Our team is ready to assist you.
  • Consult Your Teammates: Share this guide with your development team for assistance.
⌘I