Documentation

<script type="text/javascript">
(function(){
  d=document;
  s=d.createElement("script");
  s.src="https://keyai.net/api/chatbots/YOUR_ACCOUNT_ID";
  s.async=1;
  d.getElementsByTagName("head")[0].appendChild(s);
})();
</script>

Step 1: Copy Your Script Code

Navigate to your KeyAI Dashboard and copy the script code.

Step 2: Add Custom HTML Widget

In WordPress, add a Custom HTML block and paste your script code. The chatbot will appear in the bottom right corner.

Step 1: Copy Script Code

Get your script code from KeyAI Dashboard

Step 2: Open Theme Customizer

Go to Online Store → Themes → Customize

Step 3: Add Custom Liquid

Click Add Section → Custom Liquid under Footer

Step 4: Paste Script Code

Insert your script in the Custom Liquid box and Save

Step 5: Done!

Your chatbot is now live on your Shopify store

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

export default function Layout({ children }) {
  return (
    <>
      <Script
        src="https://keyai.net/api/chatbots/YOUR_ACCOUNT_ID"
        strategy="afterInteractive"
      />
      {children}
    </>
  )
}

// App.js
import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://keyai.net/api/chatbots/YOUR_ACCOUNT_ID';
    script.async = true;
    document.head.appendChild(script);

    return () => {
      document.head.removeChild(script);
    };
  }, []);

  return (
    // Your app content
  );
}