Integration Billing & Plans Flow Builder Leads & Chat Team Management

Integrate SYNC Bot

Follow these simple steps to add the SYNC Bot chat widget to your website. It works with any platform that supports custom JavaScript.

Getting Started#

Integrating SYNC Bot is as simple as copy-pasting a single line of code. Once added, the bot will appear on the bottom-right corner of your website automatically.

Note: Ensure you have "Published" your flow in the Flow Builder before testing the integration.

HTML / Static Websites#

For standard HTML websites, or generic PHP sites, place the script tag just before the closing</body> tag of your main template file.

index.html

<!-- SYNC Bot Integration -->
<script 
  src="https://sync-bot-server.onrender.com/api/flow/embed/YOUR_COMPANY_ID" 
  async
></script>

React.js & Next.js#

For React-based applications, you can place the script in yourpublic/index.html file, or use a Script component in your layout.

Next.js (App Router)

Add this to your root layout.tsx:

src/app/layout.tsx

import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script 
          src="https://sync-bot-server.onrender.com/api/flow/embed/YOUR_COMPANY_ID" 
          strategy="lazyOnload" 
        />
      </body>
    </html>
  );
}

WordPress#

There are two ways to add the bot to WordPress. The easiest way is using a plugin to insert headers/footers.

Log in to your WordPress Admin Dashboard.
Install the free plugin "WPCode" or "Insert Headers and Footers".
Go to the plugin settings and locate the "Footer" section.
Paste the code snippet below and click Save.

WordPress Footer Code

<script 
  src="https://sync-bot-server.onrender.com/api/flow/embed/YOUR_COMPANY_ID" 
  async
></script>

Wix & Squarespace#

Wix

Go to Settings > Custom Code.
Click + Add Custom Code.
Paste the snippet in the code box.
Select "Body - End" placement.
Click Apply.

Squarespace

Go to Settings > Advanced.
Select Code Injection.
Paste the snippet into the Footer field.
Click Save.

Troubleshooting#

If the widget is not appearing:

Check your browser console (F12) for any red errors.
Ensure the script URL is correct and not blocked by an ad-blocker.
Clear your cache and refresh the page.
Contact support if the issue persists.