klink.cloud - Product User Manual
  • Overview
    • 👋Welcome to klink.cloud
  • Getting Started
    • 🟦Setup Channels
      • Facebook Messenger
        • Connect to Facebook Messenger
        • Primary Routing Setup (Facebook & Instagram)
      • Facebook Feed
        • Connect to Facebook Feed
        • Primary Routing Setup (Facebook & Instagram)
      • LINE OA
        • Get Channel Secret and Channel Access Token
        • Connect to LINE OA
      • Instagram
      • Viber for Business
      • Google Workspace Email Setup
      • How to Setup Telegram Bot Channel
      • How to setup Telegram Business Account
      • How to set up WhatsApp Business Channel (Meta)
        • 📘 Troubleshooting: WhatsApp Business Account Stuck in "Waiting for Approval"
      • How to set up WhatsApp Mobile Channel
      • Web Chat Widget on Your Website or Mobile App
  • How to use
    • 📞Call
      • Inbound Call Handling
        • Inbound Call Queue Groups
      • Outbound Call Handling
    • 💬Chat
      • Inbound Chat Handling
      • Outbound Chat Handling
      • Facebook Feed Handling
    • 🔖Tickets
      • Create a Ticket
      • Assign / Transfer Ticket
    • 📇Contact
      • How to Import Leads / Contacts
      • Contact Custom Fields
      • Individual Contacts
      • Company Contacts
      • Import / Export CSV
  • Advanced Setup
    • Setup Workflow Automation
    • Setup Queue Group
    • 🕖Setup SLA Targets
    • Setup Queue, Workflow, and SLA
  • Kai AI Agent
    • 📘 How to setup AI Agent (Step by Step Guide)
  • Dashboard & Reports
    • 📊Reporting
      • CDR
      • Recording
      • Call Reports
        • Agent Call Statistics
        • Agent Call Activity
        • Trunk Activity
        • Queue AVG Waiting & Talking Time
        • Queue Performance
        • Agent Missed Call Activity
        • Agent Call Summary
        • Satisfaction Survey
      • Agent Status Report
      • CX Log
    • 📉Analytics Dashboard
      • 📶Call Dashboard
      • 📈Chat Dashboard
      • 💎Ticket Dashboard
  • Integrations
    • 🛒Ecommerce Marketplace
      • Shopee Integrations
      • Lazada Integrations
    • 🔈CRM Integrations
      • Salesforce CRM Integration
      • How to create Viber Messaging API Application
      • How to send transactional Viber Business Message
    • Infrastructure Requirements for Private Cloud Deployment
  • Messaging API
    • Line Messaging API
  • Features Roadmap & FAQ
    • ⏱️Features Road Map
    • 📢Release Notes
      • Chat Room Folder Enhancements
      • Enable/Disable Auto-Assign Toggle in Queue Settings
      • Agent Takeover Bot Chat Room
      • Workflow Automation - New Action "Send Message"
      • Enhancement of Hold Function
      • Workflow Automation Rule
      • Non-Voice Analytics Dashboard
      • WhatsApp Mobile Integration
      • Telegram Group Chat Integration for Inbox Module
      • Business Portfolio Integration - Facebook Feed
      • Call Recording Pause and Resume Feature
      • Advanced Hold Functionality for Efficient Conversation Management
      • Viber 24-Hour Response Timer
      • Enhanced Queue Settings and Workflow Automation Controls
      • Telegram Business Integration
      • Multi-Tab Call Support
      • Business Portfolio- (Meta) Messenger Integration
      • Mail Integration Enhancement and Telegram Integration
      • Facebook Feed Enhancement
      • Outlook Email Integration Enhancement (Beta)
      • Queue Setting (Beta)
      • Permission Enhancements and Multiple Assigns
      • CX Logs Enhancement
      • SMS In-bound Beta Version, SMS Integration Setting
      • Facebook Feed Integration (Beta)
      • SLA Setting and Business Hour Functionalities
      • Wrap Up Form Features and Enhancements
      • New Features & Enhancements
      • New Features and Improvement
      • New Features and Major Bug Fixes
    • FAQ
Powered by GitBook
On this page
  • 📌 Step-by-Step Instructions
  • ✅ What It Looks Like
  • 🧪 Test Before Go-Live
  • Need Help?
  1. Getting Started
  2. Setup Channels

Web Chat Widget on Your Website or Mobile App

How to Install Web Chat Widget on Your Website or Mobile App

Last updated 18 hours ago

This guide walks you through the steps to install the Web Chat widget on your website or mobile app using the klink.cloud platform.

📌 Step-by-Step Instructions

1. Navigate to Web Chat Setup

  • Log in to your klink.cloud account.

  • Go to Integrations > Messaging Integration.

  • Select Web Chat.

2. Create a New Web Chat Widget

  • Enter a name for your Web Chat instance (e.g., “SalaryHero Website”).

  • Add your whitelisted domain(s) (without http:// or https://) to restrict where the widget can be embedded.

Example: salaryhero.com www.salaryhero.com

3. Customize Widget Appearance

  • Greeting Text: Customize the welcome message shown to users (e.g., “Hi, welcome! How can I assist you today?”).

  • Placeholder Text: Optional – you can use a placeholder like “Ask me anything.”

  • Logo Upload: Upload your brand logo to personalize the chat widget.

  • Bot Display Name: Set your AI assistant name (e.g., “SalaryHero AI Assistant”).

  • Theme Color: Set a theme color for your widget using HEX color codes (e.g., #832015).

  • Agent Name (Chat Bar): This name will appear in the chat bar (e.g., “SalaryHero Agent”).

4. Optional: Add Privacy Policy

  • Toggle the Privacy Policy option if you want to display an acceptance link before chat starts.

  • Insert the URL to your privacy policy document.

5. Save and Install

  • Click Save to generate the embed code.

  • Copy the generated JavaScript snippet.

  • Paste it into your website or mobile app's HTML code, just before the closing </body> tag.

htmlCopyEdit<script>
  // [Generated Web Chat Script Here]
</script>

✅ What It Looks Like

Once installed, the widget will appear as a chat bubble on your website. All customer messages will be sent to your klink.cloud unified inbox in real-time.

🧪 Test Before Go-Live

After embedding:

  1. Visit your website.

  2. Interact with the widget to confirm appearance and functionality.

  3. Ensure messages are received correctly in your inbox.

Need Help?

If you need further assistance, please contact our support team at support@klink.cloud.

🟦