Assistant Integration

The Integration tab provides everything you need to deploy your assistant on websites, share direct links, and control the chat widget programmatically.

Overview

Once your assistant is configured and trained, you need to deploy it. FineGuide offers multiple integration options:

JavaScript embed — Add to any website
Direct link — Share a standalone chat page
Iframe embed — Embed in web applications
Third-party platforms — Connect to Slack, WhatsApp, etc.

JavaScript Embed (Recommended)

The most common way to add your assistant to a website.

Getting the Code

Go to your Assistant → Integrations
Copy the provided JavaScript code

Installation

Add both scripts to your HTML file — either in the <head> section or immediately before </body>:

html

<!-- FineGuide Chat Widget -->
<script>var FINEGUIDE_CHATBOT_ID = 'your-bot-id-here';</script>
<script src="https://cdn.fineguide.ai/fineguide.min.js"></script>

Important:

Both scripts are required
The configuration script must come first
Don't modify the script order or content

Where to Add the Code

Platform	Instructions
WordPress	Add to theme's `header.php` or use a header scripts plugin
Shopify	Add to `theme.liquid` before `</body>`
Wix	Use Custom Code in site settings
Squarespace	Add to Code Injection in advanced settings
React/Vue/Angular	Add to `index.html` or use a script loader
HTML site	Add directly to your HTML files

Verification

After adding the code:

Refresh your website
Look for the chat bubble in the configured position
Click it to open the chat and send a test message

Direct Link

A standalone URL that opens your assistant in a full-page chat interface.

Getting the Link

Your assistant's direct link follows this format:

https://client.fineguide.ai/{your-bot-id}

Find the exact link in Assistant → Integrations.

Use Cases

Use Case	How to Use
Email signatures	Add as "Chat with us" link
QR codes	Generate QR code pointing to the link
Social media	Share in bio or posts
Support portals	Link from help center
Demos	Share with stakeholders

Iframe Embed

Embed the chat directly into your page layout (not as a floating widget).

Basic Embed

html

<iframe
  src="https://client.fineguide.ai/{your-bot-id}"
  width="400"
  height="600"
  frameborder="0"
></iframe>

Responsive Embed

html

<div style="width: 100%; max-width: 500px; height: 700px;">
  <iframe
    src="https://client.fineguide.ai/{your-bot-id}"
    style="width: 100%; height: 100%; border: none; border-radius: 12px;"
  ></iframe>
</div>

Use Cases

Dedicated support page with embedded chat
Web applications with built-in assistant
Kiosk or terminal displays
Landing pages with full-page chat

JavaScript API

Control the chat widget programmatically after the script loads.

Theme Management

javascript

// Get current theme
const theme = window.$__fg_window_theme;
console.log(theme); // "dark" or "light"

// Switch to dark theme
window.$__fg_window_switch_theme("dark");

// Switch to light theme
window.$__fg_window_switch_theme("light");

Use case: Match your website's dark/light mode toggle.

Window Controls

javascript

// Open the chat window
window.$__fg_window_open();

// Close the chat window
window.$__fg_window_close();

// Toggle open/closed
window.$__fg_window_toggle();

Use cases:

Open chat after user action (button click, scroll)
Close chat when navigating away
Create custom chat buttons elsewhere on page

Practical Examples

Custom "Chat Now" Button:

html

<button onclick="window.$__fg_window_open()">
  💬 Chat Now
</button>

Open Chat on Page Load (with delay):

javascript

setTimeout(() => {
  window.$__fg_window_open();
}, 5000); // Open after 5 seconds

Sync Theme with Website:

javascript

// Assuming you have a theme toggle button
themeToggle.addEventListener('click', () => {
  const isDark = document.body.classList.toggle('dark-mode');
  window.$__fg_window_switch_theme(isDark ? "dark" : "light");
});

Open on Exit Intent:

javascript

document.addEventListener('mouseleave', (e) => {
  if (e.clientY < 0) {
    window.$__fg_window_open();
  }
}, { once: true });

Connect Apps (Third-Party Platforms)

Deploy your assistant on messaging platforms beyond your website.

Available Platforms

Platform	Description
Slack	Respond to DMs and channel messages
Discord	Bot responds to mentions and DMs
WhatsApp	WhatsApp Business API integration
Telegram	Telegram bot integration
Facebook Messenger	Facebook page inbox
Instagram	DMs and comment replies
AmoCRM / Kommo	CRM chat integration

Setup Process

Go to Assistant → Connect Apps
Click the platform you want to connect
Follow the OAuth flow or enter required credentials
Authorize FineGuide to act on behalf of your account
Configure platform-specific settings if needed

See the Connect Apps section for detailed setup guides.

Troubleshooting

Check script order — Configuration script must come before the widget script
Verify bot ID — Ensure the ID in your code matches your assistant
Check console — Look for JavaScript errors in browser developer tools
HTTPS required — Widget may not load on HTTP pages
Cache — Clear browser cache and hard refresh

Test direct link — If the direct link works, it's a script issue
Check ad blockers — Some block third-party scripts
CSP issues — Content Security Policy might be blocking the script
Network — Ensure cdn.fineguide.ai and client.fineguide.ai are accessible

Styling Conflicts

If the widget looks wrong:

Check for CSS that might affect iframes or fixed positioning
Ensure no z-index conflicts with other elements
Verify no global styles override widget styles

Advanced Configuration

Multiple Assistants on One Page

If you need different assistants on different pages:

javascript

// Change bot ID dynamically before script loads
if (window.location.pathname.includes('/sales')) {
  window.FINEGUIDE_CHATBOT_ID = 'sales-bot-id';
} else {
  window.FINEGUIDE_CHATBOT_ID = 'support-bot-id';
}

Loading Script Dynamically

For single-page applications:

javascript

function loadFineGuide(botId) {
  window.FINEGUIDE_CHATBOT_ID = botId;
  
  const script = document.createElement('script');
  script.src = 'https://cdn.fineguide.ai/fineguide.min.js';
  document.body.appendChild(script);
}

Next Steps

Customize Appearance before deploying
Configure Features for optimal user experience
Set up Webhooks to track conversations

Assistant Integration

Overview

JavaScript Embed (Recommended)

Getting the Code

Installation

Where to Add the Code

Verification

Direct Link

Getting the Link

Use Cases

Iframe Embed

Basic Embed

Responsive Embed

Use Cases

JavaScript API

Theme Management

Window Controls

Practical Examples

Connect Apps (Third-Party Platforms)

Available Platforms

Setup Process

Troubleshooting

Widget Not Appearing

Widget Appears but Doesn't Work

Styling Conflicts

Advanced Configuration

Multiple Assistants on One Page

Loading Script Dynamically

Next Steps

Assistant Integration ​

Overview ​

JavaScript Embed (Recommended) ​

Getting the Code ​

Installation ​

Where to Add the Code ​

Verification ​

Direct Link ​

Getting the Link ​

Use Cases ​

Iframe Embed ​

Basic Embed ​

Responsive Embed ​

Use Cases ​

JavaScript API ​

Theme Management ​

Window Controls ​

Practical Examples ​

Connect Apps (Third-Party Platforms) ​

Available Platforms ​

Setup Process ​

Troubleshooting ​

Widget Not Appearing ​

Widget Appears but Doesn't Work ​

Styling Conflicts ​

Advanced Configuration ​

Multiple Assistants on One Page ​

Loading Script Dynamically ​

Next Steps ​

Assistant Integration

Overview

JavaScript Embed (Recommended)

Getting the Code

Installation

Where to Add the Code

Verification

Direct Link

Getting the Link

Use Cases

Iframe Embed

Basic Embed

Responsive Embed

Use Cases

JavaScript API

Theme Management

Window Controls

Practical Examples

Connect Apps (Third-Party Platforms)

Available Platforms

Setup Process

Troubleshooting

Widget Not Appearing

Widget Appears but Doesn't Work

Styling Conflicts

Advanced Configuration

Multiple Assistants on One Page

Loading Script Dynamically

Next Steps