Widget Installation

Add powerful live chat to your website in minutes. This guide walks you through the complete process from creating your widget to verifying it's working correctly on your site.

Installation Overview

Installing the Fiko live chat widget is a simple 3-step process that requires no technical expertise. The widget is designed to work on any website and loads asynchronously to ensure it doesn't impact your site's performance.

Total time: 5–10 minutes including widget creation, code installation, and testing. No server setup or complex configuration required.

Prerequisites

Before starting the installation, make sure you have the following ready:

What You Need

Active Fiko account with widget creation permissions
Admin access to your website or ability to edit HTML
Modern web browser (Chrome, Firefox, Safari, Edge)
Website running on HTTPS (recommended for full functionality)

HTTPS Recommendation: While the widget works on HTTP sites, HTTPS is strongly recommended for security and to enable all features like file uploads and location sharing.

Step 1: Create Your Widget

Start by creating a new widget in your Fiko dashboard. This generates the unique code needed for your website integration.

Navigate to Widget Settings

Access the widget creation interface from your Fiko dashboard.

Log in to your Fiko dashboard
Go to Settings → Channels → Fiko Widgets
Click "Add new channel" to create a widget

Widget Creation

Your widget is automatically created with default settings.

A new widget named "New Fiko Chat Widget" is created instantly
You'll be redirected to the installation page automatically
Your unique channel ID is generated and ready to use

Default Settings: Your widget starts with default settings optimized for most websites. You can customize appearance, colors, and behavior after installation.

Step 2: Install the Widget Code

Copy the generated JavaScript code and add it to your website. The code should be placed before the closing </body> tag on every page where you want live chat available.

Copy the Installation Code

Your unique installation code appears on the installation page. Click the "Copy Code" button in your dashboard or use the snippet below as reference.

<!-- Start of FikoWidget code -->
<script>
  window.__chat = window.__chat || {};
  window.__chat.channelId = 'your-channel-id';

  (function (w, d, c) {
    function i(n) {
      return m._h ? m._h.apply(null, n) : m._q.push(n);
    }
    var m = {
      _q: [],
      _h: null,
      _v: '1.0',
      on: function () { i(['on', c.call(arguments)]); },
      once: function () { i(['once', c.call(arguments)]); },
      off: function () { i(['off', c.call(arguments)]); },
      toggle: function () { i(['toggle', c.call(arguments)]); },
      hide: function () { i(['hide', c.call(arguments)]); },
      show: function () { i(['show', c.call(arguments)]); },
      setVisitorInfo: function () { i(['setVisitorInfo', c.call(arguments)]); },
      init: function () {
        // Load CSS
        var cssLink = d.createElement('link');
        cssLink.rel = 'stylesheet';
        cssLink.type = 'text/css';
        cssLink.href = '/cdn/widget/fiko-widget-styles.css';
        d.head.appendChild(cssLink);

        // Load JS
        var n = d.createElement('script');
        n.async = !0;
        n.type = 'text/javascript';
        n.src = '/cdn/widget/fiko-widget.min.js';
        d.head.appendChild(n);
      },
    };
    !w.__chat.asyncInit && m.init(), (w.MyChatWidget = w.MyChatWidget || m);
  })(window, document, [].slice);
</script>
<!-- End of FikoWidget code -->

Add Code to Your Website

Paste the code into your website's HTML.

Open your website's HTML source code or template
Find the closing </body> tag
Paste the widget code just before the </body> tag
Save and publish your changes

Best Practice: Place the code before </body> for optimal loading.

Alternative: You can also place it in the <head> section, though this may slightly delay page loading.

Step 3: Test Your Widget

Verify that your widget is working correctly by testing it on your live website. This ensures visitors can start conversations with your team.

Verify Widget Appearance

Visit your website in a new browser tab or incognito window
Look for the chat widget in the bottom-right corner (default position)
The widget should appear as a small bubble or button
Click the widget to expand the chat interface

Test Chat Functionality

Click on the widget to open the chat window
Fill out any pre-chat form if enabled
Send a test message (e.g., "Testing live chat setup")
Check your Fiko dashboard for the incoming conversation

Success Indicators

Widget appears and can be clicked
Chat window opens without errors
Messages can be typed and sent
Conversation appears in your Fiko dashboard

Troubleshooting

If you encounter issues during installation, these common solutions should resolve most problems.

Widget not appearing on website

Code placement: Ensure the code is placed before the </body> tag
JavaScript errors: Check browser console for error messages
Channel ID: Verify the channel ID in the code matches your widget
Cache issues: Clear browser cache and hard refresh (Ctrl+F5)
Ad blockers: Disable ad blockers that might block chat widgets

Widget loads slowly

CDN loading: Ensure your site can access external CDN resources
Network issues: Test from different locations/networks
Code placement: Move code closer to </body> for better performance
Conflicting scripts: Check for JavaScript conflicts with other widgets

Messages not appearing in dashboard

Channel ID: Double-check the channel ID in your code
Account permissions: Ensure you have access to the widget's conversations
Firewall issues: Check if your network blocks websocket connections
Browser refresh: Refresh your Fiko dashboard
Test environment: Verify you're testing on the correct domain

Widget not working on mobile

Mobile settings: Check if "Enable on Mobile" is turned on in widget settings
Responsive design: Ensure your site's responsive design doesn't hide the widget
Touch events: Test touch interaction on actual mobile devices
Viewport issues: Check for CSS conflicts with viewport meta tags

Still Need Help?

If these solutions don't resolve your issue, contact our support team with:

Your website URL
Browser console error messages
Screenshots of the issue
Your widget channel ID

Next Steps

Congratulations! Your live chat widget is now installed and working. Here's what you can do next to optimize your customer support experience.

Installation Complete!

Your widget is live and ready to handle customer conversations. Test it from different devices and browsers to ensure everything works perfectly.

Customize Your Widget

Match your brand with custom colors, themes, and positioning options.

Customize

Advanced Configuration

Set up forms, multi-language support, and security settings.

Configure

Manage Your Widget

Access your widget settings and view performance analytics.

Go to Settings