Integrate Go High Level with CustomerLabs

GoHighLevel (GHL) is an all-in-one sales and marketing platform. It acts as a comprehensive tool for lead generation, nurturing, and conversion by offering a CRM, website/funnel builder, marketing automation, and messaging services all in a single dashboard.

Intro to GHL tracking setup

With GoHighLevel, there are some limitations when it comes to directly updating the JavaScript code to track lead forms. Therefore, we use a workaround to track the lead forms.

• Capture CustomerLabs User ID in GHL: Add a hidden field to your GHL form. Whenever a user fills out the form, assign them a unique user ID. This ID will be passed through the URL query parameter when the form is submitted.
• Using Webhooks for Lead Information: Connect GoHighLevel to CustomerLabs via a webhook. This webhook will directly receive the lead information (like email ID, first name, last name, phone number—basically all the PIIs).
• Unification of the browser and server side lead event: Now, you can merge the server-side webhook data with the browser-side form submission data using the ID assigned in the hidden field.

This approach improves the event match quality on Meta by ensuring that all customer information parameters are sent accurately. This way, you’ll have a more efficient and streamlined process for tracking leads with GoHighLevel, even with its limitations!

Prerequisites

• Admin Access to Go High Level Account
• Admin Access to Active CustomerLabs Account

Configuring GHL to capture the CustomerLabs User ID

Create a Hidden Field in the form

1. Log In to the Go High Level CRM → Click “Site” on the menu → Click “Forms” on the page as shown below.

2. Click on the three dots in the form you wish to add the hidden field and click “Edit”.

3. Once you click edit, the editor page opens. Click on the ”+” icon as shown in the screenshot below.

4. Click on the Add Object Fields tab and click on “Add” button.

5. Under text input, choose Single line input and click Next.

6. Name the Field as cluid and choose the object as Contact. Now choose the group as Additional Info and click Save.

7. In the left sidebar, search for the cluid field under Additional Info and drag and drop it in the form.

8. Once added to the field, click on the settings icon in the field to edit the field in the form and check the hidden box in the right sidebar.

Auto-populate the hidden field with CustomerLabs User ID

For every user that visits your website, CustomerLabs generates a unique user ID. This has to be passed on as a URL query parameter for GHL to capture and prefill the hidden field.

1. Log in to the CustomerLabs account → Click Destinations → All Destinations tab → Choose “Custom Integration” → Enter the name as “cluid” → and click on “Save and enable”.

2. Now that Custom Integration is added, click on “View details” on the “Custom Integration” card.

3. Click on “Configuration Settings”.

4. Under the script section, paste the following script based on the setup you have in GHL and click Save.

Scenario 1 : Single page form

This code is to be pasted only if you are using single page form in GHL.

JavaScript

(function() {
    if (["/", "/<path-name>"].includes(window.location.pathname) && window.location.host == "<your-domain.com>") {
        var cluid = window.CLabsgbVar.generalProps.uid;
        var queryParams = new URLSearchParams(window.location.search);
        if (!queryParams.has('cluid')) {
            queryParams.append('cluid', cluid); //the hidden field name in GHL should match the parameter
            window.location.search = queryParams.toString();
        }
    }
})()

Tip

Replace <path-name> with the path name of the page where the form is present and <your-domain.com> with your domain name. Ensure that the name of hidden field matches the parameter name in the code.

Scenario 2 : Multi-page form

If your form is present in multiple pages please use the below code

JavaScript

(function() {
    if (["/", "/<path-name>"].includes(window.location.pathname) && window.location.host == "<your-domain.com>") {
        var cluid = window.CLabsgbVar.generalProps.uid;
        var queryParams = new URLSearchParams(window.location.search);
        if (!queryParams.has('cluid')) {
            queryParams.append('cluid', cluid); //the hidden field name in GHL should match the parameter
            window.location.search = queryParams.toString();
        }
    }
})()

Tip

Replace <path-name> with the path name of the page where the form is present and <your-domain.com> with your domain name. Ensure that the name of hidden field matches the parameter name in the code.

5. This code appends the cluid as a URL query parameter to the URL. This will be used to prefill the hidden field in the form when submitted.
6. You can confirm this by checking if customerlabs_user_id is present in the form submission data under cluid.

Send form data from GHL to CustomerLabs

Generating the webhook URL in CustomerLabs

1. Login to CustomerLabs Account → Click Sources in left sidebar → Click Connect Source button → Choose Custom Source.

2. Enter a name and Save.

3. A webhook URL will be generated. Copy the URL.

Set Up Automation in Go High Level

1. Go to Automation → Create Workflow → Start from Scratch. Name the workflow on top.

2. Click “Add New Trigger” button.

3. Choose the trigger as per the form – Form Submitted (Single Page) or Survey Submitted (Multi-page).

4. If you wanted to trigger only particular forms, choose the forms from the filter action and click “Save Trigger”.

5. Click the + symbol and add a Webhook action.

6. In the settings, select Action Name Webhook, method as POST and paste the webhook URL copied from CustomerLabs.
7. In the custom data section, include cluid as key and choose the cluid field created earlier as value.
8. Click “Save Action” and “Publish Workflow”.

Tip

If cluid is not added in the custom data section, the cluid field and value will not be sent to CustomerLabs.

Configuring the Source Workflow

Workflows allow you to create custom events from the source as per requirements. For example, Here we can trigger an event called GHL Lead when the form is submitted.

You can setup multiple workflows to trigger multiple custom events from the source. For example, based on the form submitted, you can trigger different events.

To set up a workflow, visit the document on setting up the workflow →