> For the complete documentation index, see [llms.txt](https://imbrace.gitbook.io/imbrace-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://imbrace.gitbook.io/imbrace-documentation/connectiq/channels/web-widget.md). # Web Widget The Web Widget allows you to add a live chat window to your website so customers can start conversations with your team or chatbot directly from your pages. Web Widgets are created and managed as channels in **ConnectIQ**, and each widget can be customised to match your brand, configured to send offline emails, and connected to a workflow that controls how conversations are handled. Once a Web Widget is created and activated, it can be installed on a website using an installation script or shared as a full-page link. ### **Creating a Web Widget** #### Step 1: Create a New Web Widget To create a new Web Widget, go to **Actions > ConnectIQ** from the left sidebar and open the **Channels** tab. Click the **+** button at the top right of the channel list to add a new channel.
On the **Add New Channel** page, select **Web Widget**.
#### **Step 2:** Enter a **Channel Name** Enter a **Channel Name** and click **CREATE**. The channel name is used as an internal label to identify the widget within iMBrace and is not shown to customers.
After the widget is created, a confirmation message asks whether you want to set it up now. Click **SETUP NOW** to continue to the customisation screens. If you select **DO IT LATER**, the setup can be completed at any time from the widget's settings. A Web Widget must be set up before it can be activated.
#### **Step 3: Set Widget Style**
The Widget Style section defines how the widget appears to customers. A live preview is displayed alongside the settings, allowing you to see changes as they are made. The following settings are available: * **Widget window name:** the title displayed at the top of the widget window * **Widget window logo:** an optional logo shown in the widget header * **Widget chatbot name:** the name of the chatbot that interacts with customers * **Chatbot profile:** an optional profile image for the chatbot; if no file is uploaded, the initials of the chatbot name are used * **Welcome Message:** the first greeting customers see when they open the widget * **Primary and CTA color, Secondary Color, Header color and Background color:** the colour scheme of the widget, entered as hex codes or selected with the colour picker * **Font size (px):** the text size used within the widget
> Logo and profile images support JPG, PNG and SVG formats and must be smaller than 5MB. Once the style settings are complete, click **NEXT**. #### **Step 4: Setup Offline Email** When a customer is offline and has provided an email address, iMBrace sends replies from your team to that address. The Offline Email section defines the content and appearance of this email. A preview of the email is displayed alongside the settings.
The following settings are available: * **Email subject title:** the subject line of the email * **Email sender's name:** the sender name displayed to the customer * **Sender's email address:** the address shown as the sender; this is for display only, as the email is sent from a no-reply address * **Text in CTA button:** the label shown on the email's call-to-action button * **CTA button URL link:** the destination the customer is directed to when they click the button * **E-signature:** an optional signature block that includes a company logo, name and contact information * **Show "Powered by iMBrace":** displays or hides the iMBrace attribution in the email * **Legal disclaimer:** optional text displayed at the bottom of the email
All customer engagement from the offline email takes place through the CTA button. Any direct reply sent to the email address will not be delivered. Once the email settings are complete, click **NEXT**. #### **Step 5: Set Installation Settings** The Installation section provides two methods for making the widget available to customers.
**Method 1: Installation on a Website** The installation code adds the widget to your website. Click **Copy Code** to copy the script, then add it to your site in one of the following ways: * to display the widget on specific pages only, paste the code before the `` tag on each page where the widget should appear * to display the widget on all pages, paste the code into your site's header or footer **Method 2: Share the Full-page Web Widget**
The widget can also be accessed as a standalone full-page chat through a direct link. Click **Copy URL** to copy the link and share it wherever you engage with customers. This link can also be used in Campaigns to track engagement. Once installation is complete, click **DONE**. #### **Step 6: Activating a Web Widget** After setup is complete, iMBrace asks whether you want to save and activate the channel. Selecting **SAVE AND ACTIVATE** saves the configuration and makes the widget live immediately. Selecting **SAVE ONLY** saves the configuration without activating it, allowing the widget to be activated later from the channel list.
The **Web Widget** is now be listed under Channels **Web Widget** tab**.**
#### **Step 7: Managing a Web Widget** Created widgets are listed under **Web Widget** in the Channels tab. Each widget includes controls for managing its status and configuration:
* **Active:** turns the widget on or off to activate or de-activate the web widget. * **Allow Files Upload:** allows customers to send files through the widget * **Settings:** reopens the Web Widget Customization screens to update the style, offline email or installation details * **Workflow:** opens the widget's workflow in FlowOps * **Delete:** permanently removes the widget The channel name can be changed by hovering over the widget name and selecting **Edit Channel Basics**. Enter the new name and click **SAVE**.