Skip to main content

Widget Installation

Learn how to add the Fyncall chat widget to your website.

Prerequisites​

Before installing the widget, you need:

  1. A Fyncall account with an active subscription
  2. Your Widget ID (found in Settings → Widget → Installation)
  3. Access to edit your website's HTML

Basic Installation​

Add this script tag before the closing </body> tag on every page where you want the widget to appear:

<script async src="https://cdn.fyncall.com/widget/loader.js"
        data-fyncall-widget="fw_your_widget_id"></script>

Replace fw_your_widget_id with your actual Widget ID from the dashboard.

Installation Methods​

The simplest method - works with any website:

<!DOCTYPE html>
<html>
<head>
  <title>Your Website</title>
</head>
<body>
  <!-- Your website content -->

  <!-- Fyncall Widget - Add before </body> -->
  <script async src="https://cdn.fyncall.com/widget/loader.js"
          data-fyncall-widget="fw_your_widget_id"></script>
</body>
</html>

Google Tag Manager​

  1. Go to your GTM container
  2. Click Tags → New
  3. Choose Custom HTML tag
  4. Paste the script code
  5. Set trigger to All Pages
  6. Publish your container

WordPress​

Using a Plugin:

  1. Install a plugin like "Insert Headers and Footers"
  2. Add the script to the Footer section
  3. Save changes

Using Theme Files:

  1. Go to Appearance → Theme Editor
  2. Edit footer.php
  3. Add the script before </body>

Shopify​

  1. Go to Online Store → Themes
  2. Click Actions → Edit code
  3. Find theme.liquid in the Layout folder
  4. Add the script before </body>
  5. Save

Or use our Shopify App for automatic installation with cart integration.

React / Next.js​

// components/FyncallWidget.jsx
'use client';

import { useEffect } from 'react';

export default function FyncallWidget() {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://cdn.fyncall.com/widget/loader.js';
    script.async = true;
    script.setAttribute('data-fyncall-widget', 'fw_your_widget_id');
    document.body.appendChild(script);

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

  return null;
}

// In your layout or page:
// <FyncallWidget />

Vue.js​

<!-- FyncallWidget.vue -->
<script setup>
import { onMounted, onUnmounted } from 'vue';

let script = null;

onMounted(() => {
  script = document.createElement('script');
  script.src = 'https://cdn.fyncall.com/widget/loader.js';
  script.async = true;
  script.setAttribute('data-fyncall-widget', 'fw_your_widget_id');
  document.body.appendChild(script);
});

onUnmounted(() => {
  if (script) {
    document.body.removeChild(script);
  }
});
</script>

Configuration Options​

You can configure the widget using data attributes:

<script async src="https://cdn.fyncall.com/widget/loader.js"
        data-fyncall-widget="fw_your_widget_id"
        data-version="v2.1.0"></script>
AttributeDescription
data-fyncall-widgetRequired. Your Widget ID
data-versionPin to a specific version (e.g., v2.1.0)
data-base-urlCustom API URL (for development)
data-cdn-urlCustom CDN URL (for development)

Legacy Installation​

If you have an older API key format, you can still use it:

<script async src="https://cdn.fyncall.com/widget/loader.js"
        data-fyncall-key="sk_your_api_key"></script>

We recommend migrating to the new Widget ID format for improved security.

Verifying Installation​

After adding the widget:

  1. Refresh your website
  2. Look for the chat launcher button (usually bottom-right)
  3. Click the launcher to open the chat
  4. Send a test message
  5. Check your Fyncall Inbox to see the conversation

Troubleshooting​

Widget not appearing​

  1. Check the console - Open browser DevTools (F12) and look for errors
  2. Verify the Widget ID - Ensure it matches your dashboard exactly
  3. Check domain settings - The widget only loads on allowed domains
  4. Clear cache - Try a hard refresh (Ctrl+Shift+R)

CORS errors​

If you see CORS errors in the console:

  • Verify your domain is added to the allowed list in Settings → Widget → Domains
  • Make sure you're using HTTPS in production

Multiple widgets​

Only one widget instance can be active per page. If you have multiple script tags, remove the duplicates.

Next Steps​