# Getting Started ### 1. Enable Your Widget * Click to enable the default widget. * Save the settings to view a preview of what the widget will look like. {% content-ref url="/pages/ugKgvjaTbGUxqfEdy5xV" %} [Widget Builder](/widget-builder/overview) {% endcontent-ref %} *** ### 2. Customize Your Widget * Navigate to "Widget Settings." * Here, you can customize various aspects of the widget: * Its appearance * Location on your webpage * Custom branding options, and more {% content-ref url="/pages/ugKgvjaTbGUxqfEdy5xV" %} [Widget Builder](/widget-builder/overview) {% endcontent-ref %} *** ### 3. Add Conversion Tools™ * Initially, no Conversion Tools™ will be visible in the widget preview. * To add tools, click on "Add Tool" and select from a library of different tools. * You'll need to configure each tool individually. Resources are available in the help center for guidance. {% content-ref url="/pages/U21n1klgDYYAAWr5aJ6T" %} [Conversion Tools](/conversion-tools/overview) {% endcontent-ref %} *** ### 4. Create Smart Popups™ * You can build popups to highlight specific actions you'd like your visitors to take. * These popups have several customizable options including: * Triggering settings * Visibility settings * Display settings * Media elements and more {% content-ref url="/pages/BiMizMjcHzSN3nZN3BPy" %} [Smart Popups](/smart-popups/overview) {% endcontent-ref %} *** ### 5. Install Your Widget * Go to the "Installation Script" section. * Copy and paste the installation script into your application or web page where needed. * If you encounter issues, refer to help articles specifically designed for various applications and web pages. {% content-ref url="/pages/ugKgvjaTbGUxqfEdy5xV" %} [Widget Builder](/widget-builder/overview) {% endcontent-ref %} # Overview ## Adding New Widgets * Click on the “+” icon next to the widget drop-down selector. When you hover over the button you will see a tooltip that reads "Add new widget" * A new widget will be added with a default name with a 13-digit random number * **Example:** Widget 1671661186558

*** ## Selecting & Changing Widgets When you are ready to start editing your widgets, you will need to select your widget from the list of purchased widgets. If you are on the free plan, you will only have 1 widget to choose from.

*** ## Renaming Widgets * By default, the new widget will have a unique identifier (a mix of letters and numbers). * You can easily click on this identifier to rename the widget as per your preference.

*** ## **Duplicating Widgets** * If you've perfected a widget and wish to use it as a template for another page, use the "duplicate" feature.

*** ## Deleting Widgets {% hint style="danger" %} #### **Deleting Widgets is Permanent** Before proceeding with the widget deletion, it's crucial to note that deleting a widget is a permanent action. Once a widget is deleted, it cannot be restored. Ensure you want to remove the widget entirely from your account before proceeding with deletion. {% endhint %} #### How To Delete a Widget * **Locate the Red 'Delete Widget' Button:** On the left side of your widget builder interface until you see a red button labeled '**Delete Widget'**. * Click on '**Delete Widget**': After clicking this button, a new prompt will appear. * **Confirm Widget Removal**: The prompt will display a 'Confirm Widget Removal' button, along with options for confirming or canceling the action. You will have the choice to select 'Yes, I want to delete it' or 'No, I do not want to delete this.' * **If you choose 'Yes'**: The widget will be permanently deleted. * **If you choose 'No':** The widget will remain in your account. #### When Should I Delete a Widget? While customization options are available through updating your conversion tools and targeted prompts, there might be specific scenarios where you should delete a widget. One such case is if someone unauthorized gains access to your installation code. Under such circumstances, deleting the widget is highly recommended.

*** ## Widget Preview Window As you edit and change your widgets, you will have a preview window showing all of your changes LIVE right when you change them! You will also have the capability to use the widget as you edit it to test out the features and functionality!

# Main Settings In the main widget settings section you will have the ability to update your widget name, enable/disable your widget, change the visibility, position behavior and placement, as well as add a custom trigger. *** ## Widget Name You can edit and manage your Widget Name by typing in the Widget Name field. Name your widget according to your use case to make it easy to identify.

*** ## Enable/Disable Widget You can easily enable or disable your widget by toggling it on or off. This will reflect in the preview screen on the right hand side of the screen.

*** ## Widget Visibility You can change your widget visibility by selecting from the dropdown menu. You have the following options: 1. **Everywhere** - Shows the widget on both desktop and mobile. 2. **Desktop** - Shows the widget ONLY on desktop. 3. **Mobile** - Shows the widget ONLY on mobile.

*** ## Widget Position Behavior You can choose the behavior with which the Widget Floating Action Button is to be positioned on the screen. The behavior options include "**Fixed**," "**Anchored**," and "**Floating**". ### **Fixed** Stays at the bottom of the website.

### **Anchored** Stays on one side of the website, allows users to move widget up and down.

### **Floating** Allows users to move the widget freely around the website.

{% hint style="info" %} **Each user/visitor can move the widget without the position affecting any other user/visitor.** * The widget will always START in the bottom corner, and has memory based on each person interacting with it. **For Example:** If my widget is in the bottom corner, and I move it to the top corner, it will only be in the top corner for ME. {% endhint %} *** ## Widget Placement Choose which side of the page the button should appear on your website * **Left** - Shows widget on the left side of your website. * **Right** - Shows widget on the right side of your website.

*** ## Use Custom Trigger The Custom Trigger allows you to use a custom element to open/close the Widget. When toggled on, you will see a field appear to type in the Custom Trigger ID. #### Enable Custom Trigger * Locate the option that says "**Use a Custom Trigger**" and toggle it on. * Upon doing so, a field labeled "**Custom Trigger ID**" will appear below the toggle.

#### Specify Custom Trigger ID * After enabling custom triggers, you'll see a field for "**custom trigger ID.**" * Input the ID of the HTML element you want to serve as your custom trigger for the widget. #### Show of Hide Floating Action Button (FAB) * Below the "**Custom Trigger ID**" field, you'll find another toggle for the Floating Action Button. * Toggle this on if you want a floating action button to appear on your webpage. Toggle off if you want the widget to be triggered only by the custom element you will define in the next steps.

#### Paste Custom Trigger ID in the Widget Builder * Go back to your widget builder. * Paste the copied CSS selector code into the "**Custom Trigger ID**" field. * Remove the hashtag '#**'** from the pasted code if it's already pre-filled in the portal. #### Test the Custom Trigger * Return to your funnel page to test the custom trigger. * Click on the element you chose as your custom trigger (e.g., the "Open Widget" button). * The widget should now open when you click this element. * If you toggled off the floating action button, it should not appear on the webpage. *** ## Custom Trigger ID in Website or Funnel (CRM) * Open your CRM website or funnel builder and navigate to the page where you wish to implement the widget. * Choose the page element (e.g., a button) that you want to act as your custom trigger. * With the element selected, go to its settings, usually found on the right-hand side of the funnel builder interface. * Navigate to the "**Advanced**" settings and scroll down to find the "**CSS** **Selector**" field. * Copy the code that represents your chosen element (this will be your "**Custom** **Trigger** **ID**"). ## Custom Trigger ID in Elementor (Wordpress) {% hint style="warning" %} Documentation Coming Soon {% endhint %} # Widget Window The Widget Window settings is where you can customize the look of your widget when it is opened. You will have the ability to add a title and subtitle to welcome visitors, select your primary and secondary colors to match your company branding and upload a logo image.

*** ## Widget Title & Subtitle Here you can update the title and subtitle of your widget that will show to users when they open the widget.

*** ## Widget Colors Choose a primary color for your widget by clicking on the color block and pasting in your color code or selecting a color from the color picker. This color will show at the top of your widget, in the background of each widget tool icon, and in the close widget button.

### Selecting Colors When selecting colors for your widget, you have the ability to click & drag the icon shown here in order to select any color you want.

### Color Selection Controls When adjusting the colors of your widget, you have some different options that let you fine-tune the color and make sure it fits your brand perfectly! 1. **Color Slider** - Slide back and forth to change the base widget color. 2. **Color Code Input** - Configure your widget colors with color codes. 3. **Change Color Code Type** - Change the type of color codes you use to configure widget colors.

### Color Code Options * **Hex Codes** - A hex code is a six-digit hexadecimal code that describes a color's composition. It starts with a "#" sign and is followed by three pairs of numbers or letters. The first pair represents the amount of red in the color, the second pair represents the amount of green, and the third pair represents the amount of blue. * **RGB** - RGB (red, green and blue) refers to a system representing the colors used on a digital display screen. Red, green and blue can be combined in various proportions to obtain any color in the visible spectrum. * **HSL** - HSL stands for hue, saturation, and lightness. HSLA color values are an extension of HSL with an Alpha channel (opacity).

*** ## Widget Logo (Top Image) Upload your business logo to show on your widget, or upload an image you’d like to use for your widget icon. This will show at the top of the widget when it is opened.

### Uploading Logo Image 1. **Image Zoom** - Slider to incrementally increase or decrease the zoom on your logo image. 2. **Rotate Image** - Slider to incrementally increase or decrease the rotation of your logo image. 3. **90-Degree Rotation** - Rotate your logo image by increments of 90 degrees. 4. **Image Zoom (alt)** - Zoom in/out on your logo image. 5. **Reset Zoom & Rotation** - Resets all zoom and rotation changes. 6. **Load Different Image** - Replace the current logo image with a different image of your choice.

*** ## Floating Action Button Icon You have two options when it comes to the action button icon. This icon is what users will see on your website based on your widget configuration. ### **Default Icons** Select from a variety of icon options we have built-in for your convenience

### **Use the Widget Logo** Use the same image as your widget logo for inside the Floating Action Button (FAB)

### Reset to Default This button allows you to reset to the default icon quickly. The default icon is a "chat bubble" icon.

# Office Hours Configuring Office Hours manages the visibility of interactive elements inside of your widget, such as Conversion Tools™ and Smart Popups™, to visitors and users during specified times. * **Set Schedules**: Define specific days and hours when Conversion Tools™ and Smart Popups™ will appear to visitors and users. * **Breaks and Availability**: Schedule breaks to indicate times when you won't be available during your "Open Days". * **Time Zone & Format**: Adjust these settings to reflect your local time and preferred format for ease of configuring your availability. {% hint style="warning" %} * *Office hours **ONLY** set visibility for Conversion Tools™ and Targeted Prompts™.* * *Office hours **DO NOT** control whether the entire widget is shown or hidden.* * *When office hours are set, you can adjust the "visibility settings" in Conversion Tools™ and Targeted Prompts™ while configuring each tool or prompt.* {% endhint %}

*** ## How to Configure Office Hours When you are looking to add Office Hours, you will need to pay attention to a few different settings and buttons: 1. **Timezone Picker** - Change the timezone to match where your widget is installed. 2. **Time Format** - Apply either 12-Hour (AM/PM) or 24-Hour format to your time picker. This is entirely preference and has no positive or negative affect on how this setting functions. 3. **Day & Time Selection** - Choose the days and times that will operate as your "Open Days".

*** ## Choose Timezone Choose a **timezone** from the dropdown menu based on your business time zone.

*** ## Pick Time Format Choose whether you’d like to use **12-Hour or 24-Hour** time by clicking on the corresponding option. **For Example:** 12-Hour time schedules include AM/PM, and 24-Hour time schedules run from 0-23 hours in the day.

*** ## Choosing Days & Times To set your office hours, start by **selecting the days** you want to be your **"Open Days"**. Simply click the day of the week and you will the day with time selectors show on the screen as seen below.

### Configure Times After you have assigned the days to be your **"Open Days"**, you will need to assign the time schedules for each day. You can either type the time in, or click the clock icon. By clicking the clock icon, you will see a time selector pop up on your screen.

### Apply All If all of your **"Open Days"** follow the same time schedule, you can save time when setting your office hours by clicking the **"Apply All"** button after you've configured a single day. By doing this, you will apply the time configuration to all the days in your Office Hours schedule based on the time configuration from that single day.

### Adding Break Times If you would like to set break times where you are not available within certain days, click on the **"Add Break Time"** button. Here you can set break times that would assign you as unavailable for that time period, regardless of the day being an **"Open Day"**. {% hint style="info" %} You can only add a maximum of 3 Break Times during any single day in your Office Hours schedule. After adding 3 Break Times, you will see the button to add more will not be clickable. {% endhint %}

# Installing Widgets In order to show your widget to the world, you will need to install it on your website or sales funnel. In this help article, we will teach you how to install your widget either directly on your website or sales funnel, or by using Google Tag Manager (GTM).

*** ## Widget Installation Code No matter which process you use to install your widget, you will need to "Copy & Paste" some JavaScript code somewhere. We will instruct you on where to do this below, but for now, familiarize yourself with what this installation code looks like so you don't feel confused when going back to it later. {% hint style="info" %} To **"Copy"** the installation script, simply click the small icon to the right of the code. This will copy all of the script to your clipboard and give you the ability to **"Paste"** it somewhere. {% endhint %}

*** ## Install Script Options You will need to use a specific script depending on where you are installing your widget. If you select **"Website or Funnel"**, the script will be different than if you select **"Google Tag Manager"**. {% hint style="warning" %} **VERY IMPORTANT:** If you paste the wrong installation script, the functionality of the widget will not be dependable and may break. {% endhint %}

## 1. Install on Websites or Funnels Adding your widget to your websites and sales funnels will greatly enhance your user's experience. This will lead to more sales, higher conversion rates, and an overall better journey while visitors are navigating your website and sales funnels. There are MANY different website builders that you may be using, and they all may have different ways to install custom JavaScript (which is how the widget is installed). Below you will find instructions showing you how to install the widget in some different website and funnel builders. ### CRM Websites & Funnels #### 1. Select Widget & Copy Installation Code * Choose the widget you'd like to install on your website or funnel. * Click on **Widget Settings**. * Scroll down to the bottom of the settings page to locate the **Install** Section. * Within the **Install** Section, you will find the **Installation** **Code**. * Click the **Copy** button to copy this code. * You'll see a pop-up that confirms the code has been copied to your clipboard. #### 3. Paste Installation Code Website/Funnel Settings * Open your CRM funnel or website where you wish to install the widget. * Navigate to the **Settings** Section. * Locate the **Body Tracking Code** section within **Settings**. * Paste the copied widget installation code into this section.

#### 5. Test Widget * To confirm the widget has been installed, click on **Preview Page**. You should now see the installed widget on your page. * Click on the newly installed widget to ensure it's functioning as expected. ### WordPress Websites #### **What You Need** * Ensure you have administrative access to your WordPress site. * Verify that your WordPress theme is widget-ready. #### **Steps to Install a widget on WordPress** 1. **Log into Your WordPress Dashboard** * Navigate to your WordPress admin area (usually `yourdomain.com/wp-admin`). {% hint style="warning" %} CSS from WordPress themes and plugins may negatively affect your widget. This is unpredictable and may need to be addressed on an individual basis. If you are experiencing issues with the way the widget looks or performs, and you are using WordPress, **PLEASE** submit a support ticket so we can look into the issue for you! {% endhint %} *** ## 2. Google Tag Manager (GTM) Install {% hint style="danger" %} **VERY IMPORTANT:** In order to get your widget to work when installed with Google Tag Manager, you must use the GTM-specific installation script template shown in the section above [Install Script Options](#install-script-options) {% endhint %} **What You Need** * Access to your Google Tag Manager account * The GTM-specific installation script template for your widget **Steps to Install an Engagement Widget™ using GTM** 1. Log into Google Tag Manager 2. Navigate to the GTM dashboard and select your website's container. For any issues encountered during installation with Google Tag Manager, please reach out to our support team for assistance. *** # Overview ## Understanding Conversion Tools™ Conversion Tools™ are specialized functionalities built into your widgets that aim to convert visitors into leads, subscribers, or customers. These tools can range from simple call-to-action (CTA) buttons to more complex features like calendars, forms, and interactive content. They are designed to engage visitors and guide them towards a desired action, thereby increasing the likelihood of winning business and driving up the site's conversion rate. With Conversion Tools™ integrated into your widget, you can effectively capture user interest, gather valuable data, and foster meaningful interactions.

*** ## Adding Conversion Tools™ First, head to the "**Engagement**" section of your widget builder. Once there, click on "**Conversion Tools**™." If you've already added some tools, you'll see them listed here. If you don't have any tools added to your widget, simply click on the "**Add Tool**" button to see a list of available tools.

### Conversion Tool™ Library Once you click "Add Tool", you will see a popup on your screen with a list of all available Conversion Tools that can be added to your widget. There are tools for all kinds of different use cases, and they can be mixed and matched to build the ultimate widget for your website!

{% hint style="info" %} **Click on any of the following links to learn more about that specific Conversion Tool™ ⬇️** {% endhint %}


Broken link
Booking Calendars				Single vs Multi-Tool Display
Custom HTML				Title & Panel Title
Dedicated iFrame				Tool Visibility
Facebook Messenger				Tool Icons
Forms/Surveys
Knowledge Library
Link Launcher
Reviews
Rich Content
Tawk.to Livechat
Video Showcase
Webchat (SMS)

*** ## Preview Window: Main View vs Tool View {% hint style="info" %} This feature is only visible when you are configuring a Conversion Tool™ {% endhint %} After you have added 2 or more Conversion Tools™ to your widget, you will see a new action at the top of the preview window when configuring a tool.There will be 2 buttons you can click to change the preview view between the "**Main View**" and "**Tool View**". This feature gives you the ability to see changes that are made **INSIDE** the tool you're configuring, and **OUTSIDE** the tool in the main widget view.

### 1. Main View Clicking on "**Main View**" lets you see the list of all your Conversion Tools™. This is the view that visitors on your website will see when they open your Engagement Widget™. ### **2. Tool View** Switching to "**Tool View**” displays the specific tool you've selected for customization. This is the view that visitors to your website will see when they open the Conversion Tool™ in your Engagement Widget™.

*** ## Other Conversion Tool™ Settings


Add, Reorder, and Delete Tools
Single Tool vs Multi-Tool Layout				Single vs Multi-Tool Display
Title and Panel Title				Title & Panel Title
Tool Visibility				Tool Visibility
Tool Icons				Tool Icons

# Add, Reorder, and Delete Tools Managing your Conversion Tools™ is now easier than ever, offering you complete flexibility in personalizing your toolkit. Whether you're looking to add new capabilities, reorder existing tools for optimal workflow, or remove tools you no longer need, this article provides a comprehensive guide to help you through the process. *** ## Adding Conversion Tools™ You can add new Conversion Tools™ by selecting the Add Tool button in the top right corner and selecting the conversion tool you would like to add. When you click on the button, a popup window will appear for you to select from a wide variety of Conversion Tools™ that you can add to your Engagement Widget™.

*** ## Reordering Tools To reorder your Conversion Tools™, simply click on the six dot icon on the left hand side of the conversion tool you would like to move, and slide it up or down. When reordering your Conversion Tools™, you will see them update in the preview window on the right side of the page.

*** ## Deleting Tools If you would like to delete a Conversion Tool, click on the trash can icon on the far right of the tool you would like to delete. {% hint style="danger" %} **WARNING:** Deleting Conversion Tools™ cannot be reversed. If you feel like you've made a mistake, you will need to re-add that tool to your widget and configure the tool settings from scratch. {% endhint %}

# Single Tool vs Multi-Tool Layout Depending on your specific setup and preferred configuration, the appearance of your Conversion Tools™ within your widget can vary between two formats, **Single Tool Display or Multi-Tool Display**, depending on the number of tools you've added. *** ## Single Tool Layout If you choose to include **ONLY ONE Conversion Tool™** in your widget, it will automatically be presented to the website visitor or customer when the widget is opened.

*** ## Multi-Tool Display If you add **2 OR MORE Conversion Tools™**, your tools will show as clickable buttons inside your widget when a prospect or customer opens the widget. We call this the **"multi-tool layout"**.

This arrangement provides prospects and customers the flexibility to select the specific Conversion Tools™ they wish to utilize, as depicted below. Once the desired Conversion Tool™ is clicked by your prospect or customer, that tool will open inside the widget.

With a multi-tool layout, the prospect or customer can always click the BACK button when inside of a specific Conversion Tool™ if they want to navigate back to the main widget view and choose a different tool to interact with.

# Title and Panel Title Customize your widget with more personalized titles to grab your customer's attention. Rename your Conversion Tools™ to match your business and give it a more personalized touch. *** ## Title This is the title that will be displayed when the widget is opened and the widget tool has not yet been selected, as shown below. To change the title of any Conversion Tool™, simply click on the Title field in any Conversion Tool™ and type in your preferred text.

*** ## Panel Title This is the title that will be displayed when the widget tool is opened inside the widget, as shown below. To change the panel title of any widget tool, simply click on the Panel Title field, and type in your preferred text.

# Tool Visibility The Tool Visibility option allows you to connect individual tools to your [OFFICE HOURS](/widget-builder/office-hours) schedule. With these options, you have the flexibility to show specific Conversion Tools™ to your prospects and customers as you see fit. **You can choose to have Conversion Tools™ show at:** 1. All times of the day 2. During working hours only 3. After working hours only

{% hint style="info" %} [Click here to learn more about setting up Office Hours for your widget.](/widget-builder/office-hours) {% endhint %} *** ## Tool Visibility Options

### 1. Always With the “**Always**” option your Conversion Tool™ will show at all hours of the day. ### 2. Working Hours Only With the “**Working** **Hours** **Only**” option, your Conversion Tool™ will **ONLY** be visible during your set office hours. ### 3. After Hours Only With the “**After** **Hours** **Only**” option, your Conversion Tool™ will **ONLY** be visible after your set office hours. # Tool Icons Use different icons to personalize your Conversion Tools™ and to give your prospects and customers a better indication of what they are interacting with.

{% hint style="info" %} Our icons come from a library of icons called Font Awesome. If you find an icon that is not in our default icon library, let us know and we’ll work on getting it integrated into the system. [Click here to learn more about Font Awesome Icons](https://fontawesome.com/) {% endhint %} *** ## Default Icons To change the icon for your Conversion Tool™, scroll down to the **Main Navigation Icons** setting. You will see the **DEFAULT ICON** given to your Conversion Tool™.

Click on the dropdown menu and select the icon you would like to use for your Conversion Tool™. Make sure to save your changes once you change your Conversion Tool™ icon.

*** ## Custom Icons {% hint style="warning" %} **This feature is not yet available** When this feature is released, you will have the ability to upload your own icon instead of needing to use an icon from our icon set. {% endhint %} *** ## Reset to Default Icon If you want to change your icon back to the default icon at any time simply click the button shown in the image below.

# Tool Library ## Booking Calendars The Booking Calendars tool directly integrates with your CRM calendars and allows your prospects and customers to schedule meetings with you or your team members from inside the widget. {% content-ref url="/pages/kwZHz3wX7ylF5dOSo3Ad" %} [Booking Calendars](/conversion-tools/tool-library/booking-calendars) {% endcontent-ref %} *** ## Custom HTML The Custom HTML feature gives you the freedom to insert your own HTML code into the widget. {% content-ref url="/pages/Y1wsZkqPmsQyMlC3IraN" %} [Custom HTML](/conversion-tools/tool-library/custom-html) {% endcontent-ref %} *** ## Dedicated iFrame With the Dedicated iFrame feature, you can embed almost **ANYTHING** within the widget! Any web page or application that allows itself to be iframed can be added to your widget. {% content-ref url="/pages/qKXXafarOyAWODjBUpwO" %} [Dedicated iFrame](/conversion-tools/tool-library/dedicated-iframe) {% endcontent-ref %} *** ## Forms and Surveys Capture leads or gather other important information by adding Forms and Surveys directly into the widget. {% content-ref url="/pages/SkbqTnU1kPZqcoMeSUmR" %} [Forms/Surveys](/conversion-tools/tool-library/forms-surveys) {% endcontent-ref %} *** ## Knowledge Library The Knowledge Library lets you integrate an external knowledge base or build out your own FAQ library right into the widget. {% content-ref url="/pages/2pnk3G1NJAWDTXTm5iZY" %} [Knowledge Library](/conversion-tools/tool-library/knowledge-library) {% endcontent-ref %} *** ## Link Launcher The Link Launcher allows you to add clickable hyperlinks into the widget to direct prospects and customers to important destinations. {% content-ref url="/pages/c1SCvmSq1QrKFZwJvt8a" %} [Link Launcher](/conversion-tools/tool-library/link-launcher) {% endcontent-ref %} *** ## Reviews The Reviews feature enables the display of Google and Facebook reviews directly in the widget. {% content-ref url="/pages/fr9eqNIb4QxT39mKZsL5" %} [Reviews](/conversion-tools/tool-library/reviews) {% endcontent-ref %} *** ## Rich Content Rich Content allows you to add text, images, and videos directly into a single page inside the widget. {% content-ref url="/pages/taPGw1IgWdyFiPZ7jsyd" %} [Rich Content](/conversion-tools/tool-library/rich-content) {% endcontent-ref %} *** ## Tawk.to Livechat Add Tawk.To into your widget to unlock FREE real-time livechat with your prospects and customers. {% content-ref url="/pages/QD9UDKxAiy6HqGpgsofe" %} [Tawk.to Livechat](/conversion-tools/tool-library/tawk.to-livechat) {% endcontent-ref %} *** ## Video Showcase Upload videos from platforms like Loom, Vimeo, and YouTube into playlists or groups of videos, providing an interactive and informative experience for your prospects and customers. {% content-ref url="/pages/odYxPTjfV2PLzsIyokab" %} [Video Showcase](/conversion-tools/tool-library/video-showcase) {% endcontent-ref %} *** ## Webchat Collect new lead information and continue the conversation over SMS with this 1-to-1 replacement for your CRM's basic sms chat widget. {% content-ref url="/pages/hhC9JwV95quiVMeymDnF" %} [Webchat (SMS)](/conversion-tools/tool-library/webchat-sms) {% endcontent-ref %} # Booking Calendars ## Overview This tool allows you to show appointment scheduling calendars inside your widget. You can connect to calendar groups and individual calendars from inside your CRM software.

*** ## Use Cases * Book discovery calls with new leads directly from the widget on any page of your website. * Offer your customers the ability to book support calls. * Schedule 1-on-1 meetings with new customers after they purchase your products or services. * Offer website visitors a “free demo” calendar based on website interactions and time-on-site metrics. *** ## **Configure Booking Calendars Tool** ### Step 1: Open Tool Navigate to your widget management area in your CRM software. Look for the Booking Calendars tool or a similar section where you can manage appointment scheduling features.

{% hint style="info" %} If you have not added this tool to your widget yet, add the tool first, then you can configure the tool settings. [Click here to learn how to add new Conversion Tools™](/conversion-tools/add-reorder-and-delete-tools) {% endhint %} *** ### **Step 2: Set Tool Titles** * **Title:** Set the name of the Booking Calendars tool that will be displayed on the initial widget view. * **Panel Title:** Define the text that appears at the top of the Booking Calendars tool once it's activated by a visitor.

{% hint style="info" %} [For more information on Title and Panel Title, please view the help article here.](/conversion-tools/title-and-panel-title) {% endhint %} *** ### Step 3: Configure Tool Visibility In the **Tool Visibility** section, specify when the Booking Calendars should be visible. Base this on your office hours or other conditions found in the widget settings.

{% hint style="info" %} [For more information on Tool Visibility, please view the help article here.](/conversion-tools/tool-visibility) {% endhint %} *** ### Step 4: Select Calendar Groups Find the drop-down menu for **Calendar Groups** and choose the appropriate group that includes the calendar you wish to display in your widget.

*** ### Step 5: Choose Calendars To Display #### **Use All Active Calendars:** Use all active calendars in a calendar group by selecting **Use All Calendars in Group**, which will list all available calendars within the chosen group.

#### **Use a Single Calendar:** Use a single calendar from within a calendar group by selecting the **specific calendar** you want to display from the list of calendars in the group.

*** ### Step 6: Save Changes Save your settings to apply the changes, and test the widget to ensure the Booking Calendars appear correctly for your website visitors.

# Custom HTML ## Overview This tool gives you the ability to build a unique experience inside your widgets using custom HTML. You can add any type of content into this widget tool if it can be built with HTML {% hint style="warning" %} The HTML Conversion Tool™ **DOES NOT** render custom CSS or custom JavaScript from embedded elements. * Any custom CSS you would like to add needs to be added directly in the HTML. * Custom Javascript is **NOT** supported at this time. {% endhint %} *** ## Use Cases * Add interactive experiences to your widgets using HTML, CSS, and JavaScript * Bring HTML email templates into your widgets as Call To Actions * Show HTML websites or funnel pages inside of your widgets *** ## Configure Custom HTML Tool ### Step 1: Open Tool Navigate to your widget management area in your CRM software and open the Custom HTML tool.

{% hint style="info" %} If you have not added this tool to your widget yet, add the tool first, then you can configure the tool settings. [Click here to learn how to add new Conversion Tools™](/conversion-tools/add-reorder-and-delete-tools) {% endhint %} *** ### **Step 2: Set Tool Titles** * **Title:** Set the name of the Custom HTML tool that will be displayed on the initial widget view. * **Panel Title:** Define the text that appears at the top of the Custom HTML tool once it's activated by a visitor.

{% hint style="info" %} [For more information on Title and Panel Title, please view the help article here.](/conversion-tools/title-and-panel-title) {% endhint %} *** ### Step 3: Configure Tool Visibility In the **Tool Visibility** section, specify when the Custom HTML tool should be visible based on your office hours found in the widget settings.

{% hint style="info" %} [For more information on Tool Visibility, please view the help article here.](/conversion-tools/tool-visibility) {% endhint %} *** ### **Step 4: Add HTML** Paste your HTML code directly into the provided field in the tool configuration area. * If you want to upload the code, click the **UPLOAD** button. * To save your existing HTML code, use the **EXPORT** button to download your code.

{% hint style="warning" %} Remember, custom JavaScript is not supported, and any CSS must be included within the HTML code block itself. {% endhint %} # Dedicated iFrame ## Overview Gives you the ability to embed websites, applications, and other things directly inside of your widget inside of an iframe. {% hint style="info" %} [Click here to learn more about iframes, what they are, and how to use them.](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe) {% endhint %} *** ## Use Cases * Add website funnels directly inside your widget * Host your courses and memberships in your widget for all your customers to access easily * Embed AI tools into your widgets and bring Ai directly into your website and membership dashboards for all of your customers to use *** ## Configure Dedicated iFrame Tool ### Step 1: Open Tool Navigate to your widget management area in your CRM software and open the Dedicated iFrame tool.

{% hint style="info" %} If you have not added this tool to your widget yet, add the tool first, then you can configure the tool settings. [Click here to learn how to add new Conversion Tools™](/conversion-tools/add-reorder-and-delete-tools) {% endhint %} *** ### **Step 2: Set Tool Titles** * **Title:** Set the name of the Dedicated iFrame tool that will be displayed on the initial widget view. * **Panel Title:** Define the text that appears at the top of the Dedicated iFrame tool once it's activated by a visitor.

{% hint style="info" %} [For more information on Title and Panel Title, please view the help article here.](/conversion-tools/title-and-panel-title) {% endhint %} *** ### Step 3: Configure Tool Visibility In the **Tool Visibility** section, specify when the Dedicated iFrame tool should be visible based on your office hours found in the widget settings.

{% hint style="info" %} [For more information on Tool Visibility, please view the help article here.](/conversion-tools/tool-visibility) {% endhint %} *** ### Step 4: Add iFrame URL Paste or type in the URL you would like to use for the Dedicated iFrame. Once you add the URL, you will see the widget preview update showing the iFrame in the widget.

{% hint style="warning" %} **IMPORTANT:** The URL must allow itself to be iFramed, otherwise you will see a broken link image in the widget. {% endhint %}

# Facebook Messenger Adding Facebook Messenger to your widget allows potential clients to connect with your business from your website using Facebook Messenger. To set up Facebook Messenger in your widget, you will need to use the [Link Launcher Conversion Tool™](/conversion-tools/tool-library/link-launcher). {% hint style="info" %} [Click here to learn more about the Link Launcher Conversion Tool™](/conversion-tools/tool-library/link-launcher) {% endhint %} *** ## Setup Facebook Messenger Tool ### Step 1: Open Link Launcher Tool Navigate to your widget management area in your CRM software and open the Link Launcher tool.

{% hint style="info" %} If you have not added this tool to your widget yet, add the tool first, then you can configure the tool settings. [Click here to learn how to add new Conversion Tools™](/conversion-tools/add-reorder-and-delete-tools) {% endhint %} *** ### **Step 2: Set Tool Titles** * **Title:** Set the name of the Link Launcher tool that will be displayed on the initial widget view. * **Panel Title:** Define the text that appears at the top of the Link Launcher tool once it's activated by a visitor. * **We suggest using something like “Facebook Messenger” or “Message us on Facebook”.**

{% hint style="info" %} [For more information on Title and Panel Title, please view the help article here.](/conversion-tools/title-and-panel-title) {% endhint %} *** ### Step 3: Configure Tool Visibility In the **Tool Visibility** section, specify when the Link Launcher tool should be visible based on your office hours found in the widget settings.

{% hint style="info" %} [For more information on Tool Visibility, please view the help article here.](/conversion-tools/tool-visibility) {% endhint %} *** ### Step 4: **Add M.Me URL:** Type in the URL for Facebook messenger using the m.me URL as shown below, and use your Facebook page name as the end of your URL. * ]\*\* * **For Example:** ***google***

#### Finding Your Facebook Page Name Your Facebook business page has a name that serves as its identification. That name is what needs to be added to the URL for this tool to work properly. To find the exact name of your Facebook business page, simply open your business page and look in the URL bar. The page name will immediately follow Facebook's domain - *[www.facebook.com/](http://www.facebook.com/)**\[YourBusinessPageName]***

#### Add Business Page Name to M.Me Link Copy and paste your Facebook Business Page name into the M.Me URL we provided to you above, and whenever a prospect or customer clicks on that Conversion Tool, they will be immediately redirected to Facebook Messenger, and your business will be displayed on the page so they can directly message your business!

{% hint style="info" %} [Click here to learn more about using Facebook's m.me links and how to use them](https://developers.facebook.com/docs/messenger-platform/discovery/m-me-links/) {% endhint %} *** ### Step 5: Add Facebook Icon You can change the default icon to reflect the link will be Facebook Messenger by selecting the messenger icon or Facebook icon.

# Forms/Surveys ## Overview Gives you and your customers the ability to build the forms and surveys in your CRM and bring them directly into your widget to be used anywhere the widget is installed.. *** ## Use Cases: * Lead capture with various signup forms like a newsletter * Promote new products and offerings and collect customer opt-ins * Provide “support ticket” submissions for customers * Offer holiday discounts and promotion opt-in forms *** ## Configure Forms/Surveys Tool ### Step 1: Open Tool Navigate to your widget management area in your CRM software and open the Forms/Surveys tool.

**Panel Title:** Define the text that appears at the top of the Forms/Surveys tool once it's activated by a visitor.

{% hint style="info" %} [For more information on Title and Panel Title, please view the help article here.](/conversion-tools/title-and-panel-title) {% endhint %} *** ### Step 3: Configure Tool Visibility In the **Tool Visibility** section, specify when the Forms/Surveys tool should be visible based on your office hours found in the widget settings.

{% hint style="info" %} [For more information on Tool Visibility, please view the help article here.](/conversion-tools/tool-visibility) {% endhint %} *** ### Step 4: Choose Form or Survey Next you will have a choice to display either a **Form** or **Survey**. Each has different benefits and use cases, and you should always take those benefits and use cases into consideration before adding them to your widget.

*** ### Step 5: Select Specific Form or Survey After you choose between Forms and Surveys, you will need to select the specific Form or Survey to add into your widget. Once you select the form you want to add to you widget, you can see in the widget preview window on the right side of the screen.

{% hint style="info" %} The preview window is fully functional and allows you to see exactly how the form or survey will look in real-time inside of your widget, and allows you to test it before deploying it to your website or your website! {% endhint %} # Knowledge Library ## Overview Gives you the ability to build libraries of information to be readily accessible through the widget. *** ## Use Cases * Give website visitors a robust Frequently Asked Questions library to help close a sale * Provide information about your products or services to current customers * Teach and train people by building a structured educational course using categories and rich media content *** ## Configure Knowledge Library ### Step 1: Open Tool Navigate to your widget management area in your CRM software and open the Knowledge Library tool.

{% hint style="info" %} If you have not added this tool to your widget yet, add the tool first, then you can configure the tool settings. [Click here to learn how to add new Conversion Tools™](/conversion-tools/add-reorder-and-delete-tools) {% endhint %} *** ### **Step 2: Set Tool Titles** * **Title:** Set the name of the Knowledge Library tool that will be displayed on the initial widget view. * **Panel Title:** Define the text that appears at the top of the Knowledge Library tool once it's activated by a visitor.

{% hint style="info" %} [For more information on Title and Panel Title, please view the help article here.](/conversion-tools/title-and-panel-title) {% endhint %} *** ### Step 3: Configure Tool Visibility In the **Tool Visibility** section, specify when the Knowledge Library tool should be visible based on your office hours found in the widget settings.

{% hint style="info" %} [For more information on Tool Visibility, please view the help article here.](/conversion-tools/tool-visibility) {% endhint %} *** ### Step 4: Choose Knowledge Library Type You have two options for your Knowledge Library: * **Built-in:** Craft the FAQ section from scratch. * **External:** Link an external knowledge base via URL.

*** ## Built-In Knowledge Library With the Built-In Knowledge Library you can build a custom knowledge base complete with categories and sections using rich text and media embeds from YouTube, Vimeo, and Loom.

*** ### Add FAQ Section 1. Click on Add FAQ Section. 2. Input your FAQ section's name (such as "General Questions") in the popup that appears on your screen. 3. Confirm by clicking Save. {% hint style="info" %} You can add as many FAQ sections as you'd like to your knowledge library. Simply follow the same steps outlined above to add more sections. {% endhint %}

{% hint style="warning" %} When you add a new **SECTION**, it will **NOT** contain any **FAQ Items** *(question/answer pair)* {% endhint %}

*** ### Default Sections When the Knowledge Library tool is first opened, the DEFAULT SECTION will be the first section that appears, along with all the FAQ Items in that section. To mark a particular section as DEFAULT, simply click the STAR icon in that section.

*** ### Add FAQ Items To Section 1. Select **"Add FAQ Item"** 2. Choose the FAQ Section where you want to insert the FAQ Item. 3. Add your question. 4. Provide the answer to your question in the text box. 5. Conclude by hitting Save.

{% hint style="info" %} Take advantage of various formatting tools at your disposal: headers, bullet lists, embed video options, text styles, and more. {% endhint %} *** ### Popular FAQ Items No matter which section an FAQ Item belongs to, you can mark it as **"Popular"**. By doing this, a brand new FAQ Section will be created titled **"Most Popular"**. All "Popular" FAQ Items will show in that new section AND in their original section.

{% hint style="info" %} You cannot make the "Most Popular" section the default section {% endhint %} *** ### Reordering FAQ Sections & Items The entire FAQ, both FAQ Sections and FAQ Items within a section can be reordered by dragging and dropping. Simply click the 6 dots icon and drag the section or item up or down. #### BEFORE REORDERING:

#### AFTER REORDERING:

{% hint style="info" %} FAQ Items can be moved from one FAQ Section to another by simply dragging and dropping the FAQ Item from one section to the desired section. {% endhint %} *** ## External Knowledge Library With the External Knowledge Library option you have the ability to iframe an external knowledge library from another platform such as Gitbook, Tawk to, and other URL-based knowledge libraries. #### To add an external knowledge library simply: 1. Select **"External"** in the drop down to change the knowledge library type, 2. Then paste your knowledge library URL into the input field. Your external knowledge library will show up in the preview window so you can see what it will look like inside your widget.

{% hint style="warning" %} External Knowledge Library will not work if the platform you're trying to embed does not allow iframing. {% endhint %} # Link Launcher ## Overview Provides the ability to add buttons to your widget that link to external sources. *** ## Use Cases * Link to social media accounts * Link to payment portals * Link to educational hubs * Create “Click to Call” buttons * Create affiliate link trees *** ## Configure Link Launcher Tool ### Step 1: Open Tool Navigate to your widget management area in your CRM software and open the Link Launcher tool.

{% hint style="info" %} [For more information on Title and Panel Title, please view the help article here.](/conversion-tools/title-and-panel-title) {% endhint %} *** ### Step 3: Configure Tool Visibility In the **Tool Visibility** section, specify when the Link Launcher tool should be visible based on your office hours found in the widget settings.

{% hint style="info" %} [For more information on Tool Visibility, please view the help article here.](/conversion-tools/tool-visibility) {% endhint %} *** ### Step 4: Add Link To complete the setup of your Link Launcher tool, simply paste the link into the input field and save.

{% hint style="warning" %} Link **MUST** include one of the following protocols: * http\:// * https\:// * tel: * mailto: {% endhint %} *** ### Step 6: Choose Navigation Type Choose to open the hyperlink in the same browser tab or in a new browser tab.

# Reviews {% hint style="warning" %} We pull reviews directly from inside your CRM. If you do not have any reviews in your CRM account, no reviews will show in your widget. To get reviews into your CRM, integrate your Google and Facebook accounts into your CRM. If you have reviews, they will show in your CRM. {% endhint %} ## Overview The Reviews tool allows you to showcase your customer reviews from Google and Facebook on every page of your website from inside your widget. You can control which reviews to show or hide based on a “minimum star rating”, and even collect reviews directly from inside your widget.

*** ## Use Cases * Use social proof to convert a website visitor into a customer * Collect new reviews from your customer base *** ## Configure Reviews Tool ### Step 1: Open Tool Navigate to your widget management area in your CRM software and open the Reviews tool.

{% hint style="info" %} If you have not added this tool to your widget yet, add the tool first, then you can configure the tool settings. [Click here to learn how to add new Conversion Tools™](/conversion-tools/add-reorder-and-delete-tools) {% endhint %} *** ### **Step 2: Set Tool Titles** * **Title:** Set the name of the Reviews tool that will be displayed on the initial widget view. * **Panel Title:** Define the text that appears at the top of the Reviews tool once it's activated by a visitor.

{% hint style="info" %} [For more information on Title and Panel Title, please view the help article here.](/conversion-tools/title-and-panel-title) {% endhint %} *** ### Step 3: Configure Tool Visibility In the **Tool Visibility** section, specify when the Reviews tool should be visible based on your office hours found in the widget settings.

{% hint style="info" %} [For more information on Tool Visibility, please view the help article here.](/conversion-tools/tool-visibility) {% endhint %} *** ### Step 4: Set Minimum Rating You can choose the minimum rating to show in your Reviews tool by clicking on the stars. You can select starts in half increments from 0.5 starts up to 5 stars. Your selection will reflect in your widget.

*** ### Step 5: Set Rating Color You can select the color for your ratings by clicking on the color bar and selecting one of the given color options, or entering a custom color code. This color will show in the star ratings as seen below.

*** ### Step 6: Set Avatar Backgrounds You can change the color of the Avatar Backgrounds in your widget by selecting to use the widget secondary color you set up in Widget Settings or use random colors.

*** ### Step 7: Setup Review Request You can request reviews by toggling on Request Reviews. You will see the Google and Facebook review bars show when you toggle this on. Select if you would like to collect reviews from Google and/or Facebook, and enter the Place ID of your Google My Business and/or the username of your Facebook Page.

### Add Google & Facebook ID To find your Google Places ID, log into your CRM, go to **Settings**, and click on **Reputation Management.** If you have not yet generated a review link, click on the **Generate Link** button. Once you have generated a review link, you will see your Google Places ID at the end of the link, as shown below.

# Rich Content ## Overview This tool allows you to build stand-alone pages inside of your widget using our Rich Content editor **You can do things like:** 1. Add H1, H2, H3, ect 2. Change text size and color 3. Add images and videos 4. Add hyperlinks 5. And so much more! *** ## Use Cases: * Build individual content pages (like blog pages) directly inside of your widget for your audience to read and consume * Educate your customers or audience on critical features or processes within your application or business * Create media-rich experiences inside your widgets that draw attention and help sell your products and services *** ## Configure Rich Content Tool ### Step 1: Open Tool Navigate to your widget management area in your CRM software and open the Rich Content tool.

{% hint style="info" %} If you have not added this tool to your widget yet, add the tool first, then you can configure the tool settings. [Click here to learn how to add new Conversion Tools™](/conversion-tools/add-reorder-and-delete-tools) {% endhint %} *** ### **Step 2: Set Tool Titles** * **Title:** Set the name of the Rich Content tool that will be displayed on the initial widget view. * **Panel Title:** Define the text that appears at the top of the Rich Content tool once it's activated by a visitor.

{% hint style="info" %} [For more information on Title and Panel Title, please view the help article here.](/conversion-tools/title-and-panel-title) {% endhint %} *** ### Step 3: Configure Tool Visibility In the **Tool Visibility** section, specify when the Rich Content tool should be visible based on your office hours found in the widget settings.

{% hint style="info" %} [For more information on Tool Visibility, please view the help article here.](/conversion-tools/tool-visibility) {% endhint %} *** ### Step 4: Add Rich Content Type your content into the given field. You can change the text format by adding headings, bulleted lists, number lists, quotes and text boxes. You can also change the font size, color, and highlight as well as bold, italicize, underline, or strike-through text. You have the ability to insert code, links, and videos.

# Tawk.to Livechat ## Overview Bring Tawk.To livechat directly into the widget so you can combine the benefits of Tawk.To with all the benefits of your widget! *** ## Use Cases * Add livechat to your website for sales and support. *** ## Configure Tawk.To Tool ### Step 1: Open Tool Navigate to your widget management area in your CRM software and open the Tawk.To tool.

{% hint style="info" %} If you have not added this tool to your widget yet, add the tool first, then you can configure the tool settings. [Click here to learn how to add new Conversion Tools™](/conversion-tools/add-reorder-and-delete-tools) {% endhint %} *** ### **Step 2: Set Tool Titles** * **Title:** Set the name of the Tawk.To tool that will be displayed on the initial widget view. * **Panel Title:** Define the text that appears at the top of the Tawk.To tool once it's activated by a visitor.

{% hint style="info" %} [For more information on Title and Panel Title, please view the help article here.](/conversion-tools/title-and-panel-title) {% endhint %} *** ### Step 3: Configure Tool Visibility In the **Tool Visibility** section, specify when the Tawk.To tool should be visible based on your office hours found in the widget settings.

{% hint style="info" %} [For more information on Tool Visibility, please view the help article here.](/conversion-tools/tool-visibility) {% endhint %} *** ### Step 4: Tawk.To Livechat Configuration To connect your Tawk.To Livechat account, paste in the ***propertyid*** and the ***widgetid***. To find these id’s, log into your Tawk.To account and go to **Administration > Channels > Chat Widget**. Once you have pasted in your ***propertyid*** and the ***widgetid***, you will see your Tawk.To account connected inside the widget.

# Video Showcase ## Overview This tool gives you the ability to add YouTube, Vimeo, and Loom videos into your widgets for sales, marketing, and educational purposes. You can create video groups and allow your prospects or customers to consume videos in a specific order and within particular categories. *** ## Use Cases * Add marketing videos to your website or in your application teaching your visitors or customers about your products and services * Create video groups showcasing different areas of your business * Build onboarding video sequences to onboard new customers into your products * Add customer testimonial videos to your widgets to help convert website visitors using social proof *** ## Configure Video Showcase Tool ### Step 1: Open Tool Navigate to your widget management area in your CRM software and open the Video Showcase tool.

{% hint style="info" %} If you have not added this tool to your widget yet, add the tool first, then you can configure the tool settings. [Click here to learn how to add new Conversion Tools™](/conversion-tools/add-reorder-and-delete-tools) {% endhint %} *** ### **Step 2: Set Tool Titles** * **Title:** Set the name of the Video Showcase tool that will be displayed on the initial widget view. * **Panel Title:** Define the text that appears at the top of the Video Showcase tool once it's activated by a visitor.

{% hint style="info" %} [For more information on Title and Panel Title, please view the help article here.](/conversion-tools/title-and-panel-title) {% endhint %} *** ### Step 3: Configure Tool Visibility In the **Tool Visibility** section, specify when the Video Showcase tool should be visible based on your office hours found in the widget settings.

{% hint style="info" %} [For more information on Tool Visibility, please view the help article here.](/conversion-tools/tool-visibility) {% endhint %} *** ### Step 4: Add Description Insert a description that offers viewers an overview of the videos you're showcasing.

*** ### Step 5: Choose Playback Mode Choose how the playback of videos in your playlist should be handled.

**You have two options to choose from:**

**Inside the widget**: Videos play directly within the widget.

**External popup**: Videos open in an external screen for playback.

*** ### Step 6: Add Video Groups In order to showcase videos in your widget you will need to first create a video group. This group helps prospects and customers better understand the category or videos they are watching. {% hint style="info" %} **You can create an unlimited amount of video groups** {% endhint %} **Add Video Group** - To add a Video Group, click on the green “Add Video Group” button. You will see a popup appear where you can type in the name for your video group, then click on “Save”.

**Default Video Group -** When you add your first video group, you will see the group named DEFAULT VIDEO GROUP. Every new video group will be created without any videos added to it.

**Reorder Video Groups -** When you have multiple video groups, you can choose the order in which they display in your widget by dragging the groups either up or down using this handle and reordering them.

**Video Group Name -** This is the name your video group will display to your viewers when you have more than one video group. If you only have one video group, your viewers will not see the name of the group.

**Remove Video Group -** If you no longer want or need a video group, you can click the trash can icon to delete the entire group. {% hint style="warning" %} If you delete a video group, the added videos will need to be re-added to a different group if you want to keep them in your widget. {% endhint %}

*** ### **Step 7: Add Videos** To add videos to your video group, click on the green + button.

**You can add the following video types:** * [Individual YouTube Videos](#individual-youtube-videos) * [YouTube Video Playlists](#youtube-playlists) * [Individual Vimeo Videos](#adding-vimeo-videos) * [Individual Loom Videos](#adding-loom-videos)

*** ## Add YouTube Videos When adding YouTube videos to your Video Showcase tool, you can either add individual videos or add entire YouTube playlists just by adding a single URL. ### YouTube Playlists You have the ability to add entire video playlists from YouTube all at once. To do this, click into a YouTube playlist and grab the "Share" link.

{% hint style="info" %} When adding a video playlist URL from YouTube, you should see **/playlist?** in the URL {% endhint %} To add your playlist to your Video Showcase tool, click on the green + button, and you will see a popup appear. Paste the URL of your YouTube playlist and click on “Save”.

After pasting the playlist URL into your video showcase tool, you will see the entire YouTube playlist populate inside of your ChatHQ widget in the preview window! Adding playlists is an easy way to add many videos at once, and keep them organized by a specific category!

### **Individual YouTube Videos** You can add individual YouTube videos by copying and pasting the individual YouTube video link. Click on the green + icon to add your YouTube video, and paste the URL into the popup and click on “Save”. After pasting the YouTube video URL into your video showcase tool, you will see your video appear in the preview window to the right.

*** ## Add Vimeo Videos You also have the ability to add Vimeo videos to your Video Showcase tool. Start by going to Vimeo, choosing the video you want to use, and click on the “Copy Link” icon.

To add your Vimeo video to your Video Showcase tool, click on the green + icon next to the Video Group you would like to add it to. You will see a popup appear where you can paste the Vimeo URL, then click on “Save”.

Once you’ve added your video, you will see it populate in the preview window to the right.

*** ## Add Loom Videos You can add Loom videos to your Video Showcase tool as well. Start by going to Loom, and selecting the video you want to use. Click on the “Copy Link” icon on the top right of the video.

To add your Loom video to your Video Showcase tool, click on the green + icon next to the Video Group you want to add the video to. You will see a popup appear where you can paste the Loom URL, then click on “Save”.

Once you’ve added your Loom video, you will see if populate in the preview window on the right.

# Webchat (SMS) ## Overview This tool provides a way for prospects and customers to fill out a webchat form, which sends a message into your CRM account, and creates an sms conversation. All the functionality of your basic CRM webchat widget was recreated inside our advanced webchat Conversion Tool™, including: * Triggering workflows from new “webchat replies” * Robust activity logs in contact records for attribution tracking. {% hint style="info" %} This Conversion Tool™ is a full replacement of your basic SMS chat widget 🎉🎉🎉 {% endhint %} *** ## Use Cases * Lead capture on websites and funnels * Customer support via SMS communication * Direct contact between a prospect or customer and your CRM account * Trigger SMS communication automation using workflows to nurture leads *** ## Configure Webchat Tool ### Step 1: Open Tool Navigate to your widget management area in your CRM software and open the Webchat tool.

**Panel Title:** Define the text that appears at the top of the Webchat tool once it's activated by a visitor.

{% hint style="info" %} [For more information on Title and Panel Title, please view the help article here.](/conversion-tools/title-and-panel-title) {% endhint %} *** ### Step 3: Configure Tool Visibility In the **Tool Visibility** section, specify when the Webchat tool should be visible based on your office hours found in the widget settings.

{% hint style="info" %} [For more information on Tool Visibility, please view the help article here.](/conversion-tools/tool-visibility) {% endhint %} *** ### Step 4: Select Default Country Choosing the default country will change the "Country Code" when the prospect or customer enters their phone number into the Webchat form.

{% hint style="warning" %} **IMPORTANT:** If you do not select the correct default county, the prospect or customer can still change the country code manually, but the success rate drops due to potential human error. {% endhint %} *** ### Step 5: Select Location You will only have a single location to choose from. That location will match your current CRM account name. Open the dropdown and select that location to continue.

*** ### Step 6: Show/Hide Address If you do not want to show your company's address, or if you use a PO Box and feel like showing that is unprofessional, you can always hide the address from view by toggling the "Hide Address" into the "ON" position.

*** ### Step 7: Customize Form #### **Initial Message** When someone opens the Webchat tool, you want to greet them and make sure they fill out and submit the form. Here you have the opportunity to say whatever you want to help get this individual to convert and become a new lead.

#### **Legal Message** This message informs whoever is filling out the form about legal implications after submitting, such as SMS fees or privacy notifications. This is completely customizable.

#### **Display Email Field** If you want to collect the email of your prospect or customer, you can add and email field to the webchat form. Collecting the email helps a lot when matching current customers to contact records inside your CRM.

#### **Acknowledgment Greeting** This greeting is the small line of text that represents the header of the "success" message.

#### **Acknowledgment Message** This is the body message of the "success" message where you can enter more information for your website visitor or customer after they submit the Webchat form.

# Overview This guide walks you through the process of managing Smart Popups™ for your widget. Follow these steps to create, edit, duplicate, or delete Smart Popups™. ## Accessing Smart Popups™ 1\. Navigate to the **Engagement** tab. 2\. Select your widget. 3\. Click on **Smart Popups™.** *** ## Smart Popups™ List The list displays the following columns: 1. **Name**: The name of the Smart Popup. 2. **Status**: A green symbol for enabled popups and a red symbol for disabled ones. 3. **Folder**: The folder where the popup is stored. 4. **Details**: A quick view of the popup's configurations. 5. **Actions**: Edit, duplicate, or delete your popup. {% hint style="info" %} **Hint:** If you don't see any popups listed, it means you haven't created any yet. {% endhint %} *** ## Smart Popups™ List Actions ### 1. Edit Smart Popups™ * Click on **Edit Popup** in the Actions column. * Make your changes and configurations. * Click **Save Changes.** ### 2. Duplicate Smart Popups™ * Click on **Duplicate Popup** in the Actions column. * A clone of the popup will be created. ### 3. Delete Smart Popups™ * Click on **Delete** **Popup** in the **Actions** column. * A pop-up will appear asking for confirmation. * Click **Yes** to delete the prompt permanently, or **No** to cancel. {% hint style="danger" %} **Warning:** Deleted popups cannot be recovered. {% endhint %} *** ### Create New Smart Popups™ 1\. Click on the **Create New Popup** button located at the top-right corner. 2\. Configure your new Smart Popup™, including its name and other settings. 3\. Click **Save Changes** or **Cancel** if you change your mind. {% hint style="info" %} [Click here to learn how to create Smart Popups™](/smart-popups/creating-smart-popups) {% endhint %} *** ## More List Options **Search**: Use the search bar to find a Smart Popup™ by name. **Filters**: Filter the list by name, status, folder, or details. **Column Visibility:** Toggle on or off specific columns. **Full-Screen Mode:** Click the full-screen toggle to view the list in full-screen. Click again to exit. # Creating Smart Popups Creating Smart Popups™ allows you to target website visitors and current customers in many different areas of your website, sales funnel, and/or software application. ## Naming Popups *** ## Enable/Disable Popups You can enable or disable your Smart Popups at any time. Once enabled, your popup will show on every page where your widget is installed unless you have configured [Display Settings](#display-settings) filters. Once disabled, your popup will no longer show anywhere. ### Quick Enable/Disable Option You can also Enable/Disable Smart Popups™ from the popup list by clicking the "status" icon. *** ## Display Settings In display settings, you can configure WHERE to show your new Smart Popup™ by creating URL conditions such as **"URL Contains: /home"**. These segments and conditions can be grouped together to create powerful targeting and give you complete control over where your popups are shown. ### Creating Segments Segments are the top layer for display setting conditions. Without segments, there are no conditions. Multiple segments can be created for a single popup, and have multiple conditions in each segment. If you create multiple segments, you will need to assign the **AND/OR** function to all of the segments created. **Meaning, the popup will only show if:** * **ALL** of the segments are true **(AND)** * Or **ANY** of the segments are true **(OR)** ### Adding Conditions to Segments When creating segments, you are required to add 1 or more conditions to that segment. When adding conditions, you can add as many conditions to a single segment as you need. When you choose the function of the conditions **(AND/OR)**, all of the conditions in that segment will be assigned that function. **Meaning, the popup will only show if:** * **ALL** of the conditions in that segment are true **(AND)** * Or **ANY** of the conditions in that segment are true **(OR)** ### Important Note About Segments and Conditions: {% hint style="info" %} You cannot mix and match the **AND/OR** function in between or inside of segments. * If you choose the **AND** function, that means **ALL** of the segments or conditions must will have the **AND** function. * If you choose the **OR** function, that means **ANY** of the segments or conditions can individually control whether the popup shows or not. **Example 1:** *(must ALL be true to show popup)* Segment 1 "AND" Segment 2 "AND" Segment 3 **Example 2:** *(ANY can be true to show popup)* URL Contains - support "OR" URL Ends With - .com "OR" URL Contains - /blog {% endhint %} *** ## Cover Media You can spice up your Smart Popups™ by adding images and videos to them, capturing more attention from your intended audience and even educating them all with the same popup! To add images and videos to your Smart Popups™, first toggle the "Cover Media" switch to the ON position. Once you do this, you will see some new settings appear on your screen. {% hint style="warning" %} **Reminder:** You cannot add images or videos to Banner Popups {% endhint %} ### Add Images/GIFs ### Using CRM Media ### Add YouTube Videos ### Add Vimeo Videos ### Add Loom Videos *** ## Adding Text in Smart Popups™ ### Introduction Text ### Body Text *** ## Linking Conversion Tools™ to Smart Popups™ ### Link All Active Conversion Tools™ ### Select Specific Conversion Tools™ *** ## Trigger Settings *** ## Visibility Settings # Overview {% hint style="info" %} This help article is coming soon. {% endhint %}