Skip to main content

💬 Live Chat in OmniServe

Discover how to create, customize, and configure Live Chat and embed it on your website in a few simple steps to allow your visitors to interact with your agents without leaving your website.

Updated over 2 months ago

💡 Introduction

We understand the importance of quick communication, so Lucidya launched a Live Chat feature in OmniServe. This feature allows you to embed a chat widget on your website, enabling visitors to interact with your customer support agents without leaving your site.

With this feature, you can customize the live chat widget with your branding—including logo, font, language (Arabic, English, or Auto-detect), theme, content, pre-chat form, and pre-chat questions. This guide will walk you through creating a new live chat channel, embedding it on your website, and receiving messages from your visitors.

Step-by-Step: 💬 Setting Up and Customizing Live Chat Widget

➕ Step 1: Creating a New Live Chat Channel

To create a new live chat channel, follow these steps:

  1. Open the Lucidya sidebar and click Monitor.

  2. Select Manage Channels from the Monitor menu.

  3. Click the ➕ New Channel button at the top right of the Manage Channels page.

  4. Select Chat from Choose Category (Step 1) and click Next.

  5. Click the Live Chat tab in Setup Channel (Step 2), then click ➕ New Live Chat to add a new live chat channel.

  6. Enter your Channel Name and Website Domain in the Add New Live Chat popup.

  7. Now you can set up and customize your chat widget.

Create a New Channel
Chats Category
Setup Channel as a Live Chat and Create a New Live Chat Channel
Add New Live Chat Channel
Select your Live Chat Channel

✨ Step 2: Exploring the Live Chat Builder

The Live Chat builder has two main sections:

  • Display tab (1st tab on Left): Customize your branding, including basic settings, appearance, chat icon, and position.

  • Content tab (2nd tab on Right): Add content for the widget, including the title, pre-chat greeting, pre-chat form, and starter messages.

  • Chat Appearance - Preview (Right): Preview your changes before publishing the widget on your website.

Live Chat Builder

🎨 Step 3: Customizing the Display Tab for Your Live Chat Widget

💡Summary

Discover how to customize and personalize the live chat widget with your branding using the following options:

  1. Basic Settings

  2. Appearance

  3. Chat and Bubble Icons and Colors

  4. Chat & Bubble Position and Spaces

Step 3.1: Configure Basic Settings

Here you can configure the chat widget's logo, select the language and font type, enable notification sounds, and enable white label mode (which removes Lucidya branding).

Basic Settings Options:

  1. Upload Logo (Brand Logo): By default, Lucidya retrieves your website logo after you add your domain when creating a new live chat channel in this step: ➕ Step 1: Creating a New Live Chat Channel. You can change it by clicking the 📝 icon and uploading your custom brand logo (supported formats: PNG, JPG, or SVG; max size: 1MB). Your logo will appear in the top corner when customers open the chat widget.
    ​

    Upload your brand's logo for live chat widget

  2. Chat Language: Set the default chat language for your widget. Choose from the following options:

    1. 🇸🇦 Arabic: Selecting Arabic enables Lucidya's powerful Arabic language support. The widget aligns to the right, and all pre-defined content automatically translates to Arabic under the Content tab: 🔤 Step 4: Setting Up the Content Tab for Your Live Chat Widget

    2. 🇺🇸 English: Selecting English displays the chat widget content, messages, pre-defined questions, and form with left alignment.

    3. 🤖 Auto-detect (Match website language): The chat widget automatically matches the language selected by users on your website. We support Arabic and English. 💡 Note: If Auto-detect selects an unsupported language, the chat defaults to English.
      ​

      Select live chat language (Arabic, English, or auto-detect)

      ​

  3. Font Type: Choose your preferred font for the live chat widget to match your brand from our supported font types. The selected font type will apply to all content, including messages, pre-defined questions, and Pre-chat form.
    ​

    Select your best font type for live chat widget

  4. Enable Sound Notifications: Enable or disable sound notifications when customers receive new messages in the live chat widget.
    ​

    Enable sound notifications feature in live chat to notify your visitors when they receive a new message

  5. Enable White Label: Toggle this feature to remove the "Powered by Lucidya" branding from your live chat widget.
    💡Note: This feature is paid — to access it, contact your customer success manager to enable this feature for your account.
    ​

    Remove powered by lucidya with white label feature

Step 3.2: Customize Appearance to Match Your Branding

Customize your live chat widget with your brand's theme (light, dark, or auto-detect) and primary color.

Appearance Options

  1. Select Theme: Lucidya offers three theme options to match your branding:

    1. Light Mode: Displays a light theme for the chat widget.

    2. Dark Mode: Displays a dark theme for the chat widget.

    3. Match Website Theme: Automatically detects and matches your website's theme. If the theme cannot be detected, light mode is applied by default.

  2. Choose Your Primary Color: Select your brand's primary color, which will apply to the chat widget's send message button, send message text field border, and message bubble.

Customize Appearance to Match Your Branding

Step 3.3: Change Chat Icon

Customize your website's chat and bubble icons and colors to match your brand's look and identity.

Chat Icon Options

  1. Icon Size: Select your preferred size (Large, Medium, or Small).

  2. Icon Shape: Choose the shape for your live chat bubble icon (Rounded or Square).

  3. Icon Shadow: Select your preferred shadow effect: no shadow, light shadow, medium shadow, or strong shadow.

  4. Icon Color: Pick a color for the icon if you're using the default icon. This option is unavailable if you've uploaded a custom icon.

  5. Bubble Color: Choose the background color for the bubble button.

  6. Custom Icon (for Bubble): Upload your custom icon to display on the chat widget bubble.

Customize the bubble icons and colors

Step 3.4: Chat & Bubble Position and Spaces

Choose where your live chat widget appears on your website—bottom right or bottom left—and set the side and bottom spacing in pixels (maximum 100px).

Position Options

  1. Select the chat widget Position: Position the live chat bubble and widget at the bottom right or bottom left.
    ​

    Select the your best position for live chat widget (bottom right or bottom left)

  2. Set Side Space in Pixels (px): Adjust the side spacing for the selected position (maximum 100px).
    ​

    Set side space in pixels (100 px max)

  3. Set Bottom Space in Pixels (px): Adjust the bottom spacing for your live chat bubble (maximum 100px).
    ​

    Set bottom space in pixels (100 px max)

🔤 Step 4: Setting Up the Content Tab for Your Live Chat Widget

💡 Summary

Use our pre-defined content or customize your own to personalize the chat experience before visitors start a conversation. You can configure:

  1. Title & Pre-Chat Greeting Message

  2. Pre-Chat Form Fields & Message

  3. Starter Message & Questions

Step 4.1: Customize Title & Pre-Chat Greeting

Provide your customers with a customizable chat widget title (will display at the top of the widget) and pre-chat greeting message, which will display when they open your website to trigger the live chat widget as a call to action.

Title & Pre-Chat Greeting Options

  1. Live Chat Widget Title (Required): Enter the title you want to display at the top of your chat widget. This title appears next to your brand's logo.
    ​

    Write the Live Chat Title to display it at the top of the widget

  2. Enable Pre-Chat Greeting Message (Optional): Turn on this feature to add a greeting message that appears when customers visit your website. When they click it, the live chat widget opens so they can start chatting with your customer support agents.
    💡 Note: You can write a pre-chat greeting message in your preferred language (Arabic or English) with up to 100 characters.
    ​

    Enable and Add Pre-Chat Greeting Message for your Live Chat widget

Step 4.2: Enable Pre-Chat Form to Collect Visitor Info

By enabling this feature, you can add a pre-chat form message and some form fields like full name, email address, and/or phone number to gather this information from your visitors before starting the conversation. 💡 Note: We recommend keeping the pre-defined form fields (Full Name, Email, and Phone Number) — you can hide any field instead, as these fields are supported to display to the agent in the inbox page.

Pre-Chat Form Options

  1. Enable Display Form: Toggle this option to enable or disable the pre-chat form on your chat widget.
    ​

    Enable Pre-Chat Form

  2. Write Pre-Chat Form Message (Required if Pre-Chat Form is Enabled): Write a message encouraging visitors to complete the form before starting a chat. This message appears when they open the chat widget (up to 150 characters).​
    ​

    Write Pre-Chat Form Message (Required if Pre-Chat Form is Enabled)

  3. Add Form Fields (up to 3 Fields): Lucidya supports 3 types of pre-defined fields that your visitors can fill in. You can show or hide any field, reorder them by dragging and dropping, and mark them as required or optional:

    1. Full Name

    2. Email Address

    3. Phone Number (with country code support)

Add Form Fields (up to 3 Fields, Full Name, Email, and Phone Number)

Step 4.3: Enable & Add Starter Messages & Questions

Predefined questions appear after the pre-chat form, letting customers choose and send a question to begin the conversation.

Starter Message & Questions Options

  1. Add Pre-question or Starter Message (Required): Write a starter message to display for your visitors before they begin the chat.

  2. Enable Display Starter Questions: Add up to 5 common questions (maximum 50 characters each) for your visitors to choose from when starting a chat. You can reorder or delete questions as needed.

Add Pre-question or Starter Message (Required)
Enable Display Starter Questions (up to 5 questions)

👀 Step 5: Previewing Your Live Chat Before Publishing

Lucidya provides a Preview button to check all your customizations and configurations before publishing your live chat widget. This feature also allows you to interact with the chat widget.

You can preview all your customizations and configurations for your live chat widget before publishing and embedding it on your website by clicking the Preview button at the top right of the chat widget builder. Lucidya also displays the chat widget preview in the right section of the chat builder. However, if you need to interact with the chat widget, click the Preview button.

Previewing Your Live Chat Before Publishing

📣 Step 6: Publishing & Embedding Live Chat on Your Website

After previewing all your configurations and customizations for your live chat widget and ensuring everything matches your website's branding, you can now publish and embed your live chat widget on your website with the domain you added in Step 1: ➕ Step 1: Creating a New Live Chat Channel

How to Install Live Chat on Your Website

  1. Click the Add Channel button in the bottom-right corner.

  2. Copy the snippet code from the popup screen and share it with your developer to add to your website's code before the closing </body> tag on every page where you want the live chat to appear.

  3. After adding the snippet code correctly to your website, visit your site to verify the integration.

  4. Your domain will be verified automatically, and the live chat widget will appear on your website.

  5. You can also check your live chat widget's status under “Monitors” → “Manage Channels” → “Status (Column)”.

Embedded Snippet Code on Your Website

⁉️ FAQs

💬 What is Live Chat in OmniServe?

Live Chat in OmniServe is a customer engagement tool that lets you communicate with website visitors in real-time. It helps you provide instant support, answer questions, and improve customer satisfaction.

🇸🇦 What languages are supported for the chat widget?

The live chat widget supports both Arabic and English for all content including titles, greeting messages, and form labels.

🎨 Can I customize the appearance of the chat widget?

Yes, you can fully customize the chat widget's appearance including colors, icons, position, size, shape, and shadow effects to match your brand identity. You can also upload custom icons and logos.

↔️ How do I change the chat widget position on my website?

Go to the Display tab in the Live Chat builder, navigate to the Position section, and choose between bottom right or bottom left. You can also adjust side and bottom spacing up to 100px.

❓ What is a pre-chat form and why should I use it?

A pre-chat form collects visitor information (name, email, phone number) before starting a conversation. This helps you gather contact details for follow-ups and provides context for your support team.

🚫 Can I disable the pre-chat greeting or form?

Yes, both the pre-chat greeting and pre-chat form are optional features. You can enable or disable them using the toggle switches in the Content tab of the Live Chat builder.

⁉️ How many starter questions can I add?

You can add up to 5 starter questions, with each question limited to 50 characters. These questions help guide visitors to common topics and streamline the conversation.

👀 Can I preview the chat widget before publishing?

Yes, click the Preview button at the top right of the chat builder to see all your customizations and interact with the widget before publishing it to your website.

🧩 How do I install the live chat widget on my website?

After clicking "Add Channel," copy the snippet code from the popup and add it to your website's HTML code before the closing </body> tag on every page where you want the live chat to appear. Once installed correctly, your domain will be automatically verified and the widget will appear.

✅ How do I check if my live chat widget is active?

Go to Monitors → Manage Channels and check the Status column to see if your live chat widget is active and properly installed on your website.

Related Articles
🌐 Creating an Embedded Survey
Did this answer your question?