How to Add the Chat Widget to Funnels, Websites, and Wordpress Sites

Installing the FG Funnels Chat Widget on client websites is one of the easiest ways to generate leads without ad spend.


The Chat Widget supports Live Chat (useful for companies with sales and support teams read to respond right away), SMS messaging, and WhatsApp messaging (if enabled on the account). In any case, the Chat Widget installation is simple and requires no development knowledge or technical skills. 

In This Article:

Chat Widget Options

The chat widget within FG Funnels work in three different ways depending on what works best for your business.

1. Email and SMS Chat - This chat will collect the visitor’s information so that you can respond to them via SMS or email later. It is great for small teams that are not staffed 24x7.

Email and SMS Chat Option

2. Live Chat - Live chat is a real-time, 2 way conversation within the chat widget. Great for teams with 24x7 coverage and with Conversation AI installed (Conversation AI is an add-on offering for an additional fee).

3. Whatsapp Chat - A whatsapp integrated 2 way conversation on chat widget. The user needs a whatsapp approved number and the Whatsapp add-on for FG Funnels. It is also great for small teams that are not staffed 24x7.


Customizing Your Chat Widget

Be sure you have purchased a phone number and completed the required A2P registration in the sub-account in order for the SMS replies to be sent, if you are using the phone option.

  1. To create a chat widget, go to Sites -> Chat Widget -> Add New.

    Add New Chat Widget

  2. Select the type of chat widget you would like to create. For a refresher on these options, see the section above titled Chat Widget Options.

    Types of Chat Options

  3. When the widget editor opens, you will see a left hand options panel with tabs for different options. You will also see the widget preview in the main area of the screen. Any changes you make to the settings will be reflected in that widget preview.

    Widget Settings Page

Most options will be the same/similar across chat widgets, however, this tutorial specifically addresses the Email/SMS chat widget. If you see discrepancies, it may be because you are using the Live Chat or What'sApp chat.

  1. From the widget tab, you will be able to customize the look and feel of the widget as it first appears on the screen, before your visitor has interacted with it. You have options including:

    Widget Tab in Chat Widget

    1. Whether to have a chat prompt or just the icon
    2. The icon used in the bubble, including a custom icon
    3. The colors used for the widget, including the option to set your own colors
    4. The welcome message to be used if you are using the chat prompt. You will also have the option to have a custom greeting for returning visitors if they have previously interacted with you and have a cookie on their browser.
    5. Under Widget Customization, you can choose whether or not to use an avatar photo and what photo to use.

    6. You can set the widget position and dimensions if you choose on desktop.


  2. From the chat window tab, you can set the settings for when someone has clicked to start a chat.

    Chat window tab

    1. You can customize the title and intro messages
    2. You choose what information the form will collect, up to 5 fields.
      1. Be aware that you must use name as a field
      2. You also must use either phone or email as a field to give you a way to respond to people. If you choose phone, you must have purchased a phone number and completed any required compliance or A2P registration in order for SMS replies to be sent.
    3. You can customize the button text and redirect users to a certain page after clicking the button if you choose.
    4. From Additional Options, you can remove or customize the Powered by FG Funnels text at the bottom of the widget.
    5. You can also adjust your legal message and whether users have to check the box or they consent by clicking the button. (Please note, we are not lawyers and cannot advice on compliance issues).

      1. IMPORTANT: The consent checkbox is labeled as for HIPAA. This is not correct. FG Funnels is not HIPAA Compliant and chat messages are not HIPAA compliant. This is instead what shows the legal message.


  3. From the messaging tab, you can customize what the visitor sees after clicking the send button, if you haven't turned on a Redirect Call-To-Action.

    Messaging Tab in Chat Widget Settings

    1. You can adjust the contact information, acknowledgement message, greeting, icon and color.
    2. You can also clarify the language the message is in.
  4. Save your changes when you are happy with your webchat.

How to Install the Chat Widget to a Funnel or Website in FG Funnels

Adding A Chat Widget to All Pages in a Funnel or Website in FG Funnels

You can add a chat widget to all pages in a funnel or a website by selecting the desired chat widget in the funnel or website settings.

  1. Go to Sites -> Funnels or Websites -> Your Funnel/Website.

  2. From the Overview page, click the Settings link under the name of your funnel.

  3. In the left hand column, underneath the title Chat Widget, choose your desired Chat Widget from the dropdown.

  4. Click save and your chat widget will appear on all pages in that funnel or website.

Adding A Chat Widget to Certain Pages in a Funnel or Website in FG Funnels

You can also use the code provided by the widget to add the widget to just certain pages in the funnel or website. For this option, make sure that a chat widget is NOT selected in the Settings of the funnel or website.

  1. From Sites -> Chat Widget, click on the name of your widget to edit it.

  2. When the editor opens, click the "Get Code" button. A box will popup with script code. Copy that code to your computer.

    Get Code Button

    Code for Widget

  3. Navigate back to the website or funnel page you want the chat widget to appear in and open it in the funnel builder.

  4. Click on the tracking code icon on the left side of the middle bar of the top toolbar. It looks like two arrows with a slash between it.

    Tracking Icon is pointed to

  5. Select footer tracking and paste in the chat widget code. Save the changes.

    Code in footer tracking code

  6. Save and publish the page.

Adding A Chat Widget to a Website Outside of FG Funnels

If you are using a website builder that you can add custom code to, you can follow steps 1&2 of Adding A Chat Widget to Certain Pages in FG Funnels to copy the code that you can then add to your own builder within the body or footer section of your site. Within this Get Code panel, there is also a toggle to add code via Google Tag Manager.

If you are using WordPress, you can use the LeadConnector plugin in WordPress to directly connect to your account and install the chat widget from there.

How To Add Webchat To Your WordPress Website:

FAQs

Can I customize my chat widget messaging per page?

The current configuration of the webchat widget does not allow for dynamic messaging. Although the widget can be used on multiple pages, the messaging will remain consistent with the initial setup.


Can I create multiple chat widgets in a sub-account?

Yes, you can now create multiple chat widgets within your account for use on your funnels and websites.