Skip to main content
Once you have your embed code, adding it to your website is straightforward. This page covers common installation methods.

​
Basic Installation

Add the embed code just before the closing </body> tag: 
<!DOCTYPE html>
<html>
<head>
  <title>Your Website</title>
</head>
<body>
  <!-- Your website content -->
  
  <!-- Atoms Widget -->
  <script>
    (function() {
      var script = document.createElement('script');
      script.src = 'https://widget.atoms.ai/v1/widget.js';
      script.setAttribute('data-agent-id', 'YOUR_AGENT_ID');
      document.body.appendChild(script);
    })();
  </script>
</body>
</html>

​
Platform-Specific Instructions

​
WordPress

  1. Go to Appearance → Theme Editor
  2. Open footer.php
  3. Paste embed code before </body>
  4. Save
Or use a plugin like “Insert Headers and Footers”:
  1. Install the plugin
  2. Go to Settings → Insert Headers and Footers
  3. Paste code in the “Footer” section
  4. Save

​
Shopify

  1. Go to Online Store → Themes
  2. Click Actions → Edit code
  3. Find theme.liquid
  4. Paste before </body>
  5. Save

​
Squarespace

  1. Go to Settings → Advanced → Code Injection
  2. Paste in the “Footer” section
  3. Save

​
Wix

  1. Go to Settings → Custom Code
  2. Add new code
  3. Paste embed code
  4. Set placement to “Body - end”
  5. Apply to all pages

​
React

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://widget.atoms.ai/v1/widget.js';
    script.setAttribute('data-agent-id', 'YOUR_AGENT_ID');
    document.body.appendChild(script);
    
    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <div className="App">
      {/* Your app content */}
    </div>
  );
}

​
Next.js

// pages/_app.js or app/layout.js
import Script from 'next/script';

export default function App({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script
        src="https://widget.atoms.ai/v1/widget.js"
        data-agent-id="YOUR_AGENT_ID"
        strategy="lazyOnload"
      />
    </>
  );
}

​
Testing the Installation

After adding the code:
  1. Clear cache — Browser and any CDN cache
  2. Visit your website — Open in browser
  3. Look for widget — Should appear in corner
  4. Click to test — Have a conversation
  5. Check on mobile — Verify mobile experience

​
Troubleshooting

IssueSolution
Widget doesn’t appearCheck for JavaScript errors in console
Button appears but doesn’t workVerify agent ID is correct
Microphone not workingCheck browser permissions
Widget appears on wrong pagesAdjust placement or add conditions

​
Showing on Specific Pages

To show the widget only on certain pages: 
<script>
  // Only load on support pages
  if (window.location.pathname.includes('/support')) {
    var script = document.createElement('script');
    script.src = 'https://widget.atoms.ai/v1/widget.js';
    script.setAttribute('data-agent-id', 'YOUR_AGENT_ID');
    document.body.appendChild(script);
  }
</script>

​
What’s Next

Campaigns

Run outbound calls

Widget Configuration

Customize appearance