Embedding the Lead Generator Widget on your website

This article has been translated with the assistance of an automated translation tool.

While we have made every effort to ensure the accuracy of the translation, there may be some imperfections. Please be aware that nuances and specific technical terms might not have been perfectly captured.

Introduction

The Lead Generator widget can be embedded into your website using a simple HTML snippet. This allows your visitors to interact with the widget directly on your page, while you can customize its appearance and behaviour through configurable parameters.

⚠️ Please note: To use the widget, you need a valid API key provided by PriceHubble. 

Table of contents

1. Basic configuration

2. Lead Generator V1

   1. Constructor and parameters

   2. Testing via URL

3. Lead Generator V2

   1. Constructor and parameters

   2. Testing via URL

4. GDPR compliance and consent management

1. Basic configuration

The easiest way to generate the correct HTML snippet is by using our constructor.

• With the constructor, you can enter the provided API key and directly configure certain design elements of the widget.

• The tool then automatically creates the ready-to-use code snippet for you, which you can simply copy and paste into your website.

If you prefer to create the code manually, the configuration can be found in our API documentation and is linked for the respective variants under point 2 and 3 as well.

2. Lead Generator V1

1. Constructor and parameters

The constructor for our Lead Generator V1 can be found here:  

=> https://fisher.pricehubble.com/fisher-constructor.html 

If you prefer to configure the HTML code manually, you find the documentation here: Lead Generator V1. 

The Lead Generator widget supports multiple parameters to adapt the widget to your needs. For V1, those are: 

• activeColor (1): Chosen colour is applied to all active elements such as field frames and sliders, where an action or selection of the user is expected.

• buttonColor (2): Chosen colour is applied to all buttons in the form. 

• textColor (3): Chosen colour is applied to all text elements such as field titles 

• resizable (4): controls whether the widget automatically adjusts its height and width to fit the container.
  If unchecked, the widget keeps a fixed size and may not adapt correctly to different screen or container sizes.

• lang (5): Fixes the widget’s language to a specific code (e.g. de, fr, en); without it, the language adapts dynamically to the browser setting.

• scrollTopOffset (6): defines how far from the top of the page the widget should be positioned when the page scrolls.
  This is useful if a sticky navigation bar is covering part of the widget. For example, if your navigation bar is 50px high, set scrollTopOffset: 50 so the widget always stays visible below it.

• custom (7): passes additional information whenever the widget form is submitted.
  This value is included in the notification email, which makes it possible to track the origin of a request. For example, if the widget is embedded on several websites, you can set custom: 'www.example.com' to identify from which site the request came.

• gaTrackingId (8): makes it possible to forward certain widget events to your Google Analytics account.
  To activate this tracking, a valid GA4 Measurement ID must be included in the configuration. 

• iframe border (9): defines whether the iframe has a visible border or not.

2. Testing via URL 

You can quickly preview the Lead Generator widget in your browser to see the flow of the form using a test URL.

• Step 1 

  Base URL: https://fisher.pricehubble.com/?api-key={{your_API_key}}
  => Replace {{your_API_key}} with your actual API key.

• Step 2

  To test the widget in a specific language instead of using the browser default, add the lang parameter:

  For example: https://fisher.pricehubble.com/?api-key={{your_API_key}}&lang=eng
  lang=eng sets the language to English

⚠️ Please note: This testing URL only previews the form. It does not update the widget on your website.

Using this URL is a convenient way to verify the widget flow, labels, and form steps before integrating it live.

3. Lead Generator V2

1. Constructor and parameters

The constructor for our Lead Generator V2 can be found here:  

=> https://fisher-v2.pricehubble.com/constructor/fisher.html 

If you prefer to configure the HTML code manually, you find the documentation here: Lead Generator V2. 

The Lead Generator widget supports multiple parameters to adapt the widget to your needs. For V2, those are: 

• primaryColor (1): This colour is in general applied to the widget theme.
• scrollTopOffset (2): defines how far from the top of the page the widget should be positioned when the page scrolls.
  This is useful if a sticky navigation bar is covering part of the widget. For example, if your navigation bar is 50px high, set scrollTopOffset: 50 so the widget always stays visible below it.
• titleSettingStatus (3): Lead Generator widget V2 allows you to customize the title and subtitle of the first form page, or completely hide the title. You can change the status from Default (standard text), to Hidden (no title) or Custom. 

When choosing custom, you can specify your title and subtitle in the fields underneath ("Custom title" and "Custom subtitle"). 

• lang (4): Fixes the widget’s language to a specific code (e.g. de, fr, en); without it, the language adapts dynamically to the browser setting.
• gaTrackingId (5): makes it possible to forward certain widget events to your Google Analytics account.
  To activate this tracking, a valid GA4 Measurement ID must be included in the configuration. 

Form start with generic titles: 

Setup with custom titles: 

2. Testing via URL

You can test the Lead Generator widget directly in your browser by adding configuration parameters to the widget URL. 

This is a quick way to see how different settings affect the appearance and behaviour of the widget without changing the live website code.

• Step 1:

  Base URL: https://fisher-v2.pricehubble.com/?api-key={{your_API_key}}
  Replace {{your_API_key}} with your actual API key.

• Step 2:

  To test the widget in a specific language instead of using the browser default, add the lang parameter:

  For example: https://fisher-v2.pricehubble.com/?api-key={{your_API_key}}&lang=eng

  lang=eng sets the language to English

⚠️ Please note: This testing URL only previews the form. It does not update the widget on your website.

Using this URL is a convenient way to verify the widget flow, labels, and form steps before integrating it live.

4. GDPR compliance and consent management

To comply with GDPR regulations, analytics may only be enabled after a user has given consent. The parameter consentGranted controls whether the widget can send analytics data to third-party services (like Google Analytics) during initialization.

• true → tracking is allowed immediately if the user has already consented. User consent is already given, for example through an "Allow tracking" pop-up when entering the website. This is the default setting.
• false → tracking is blocked at first. Once the user accepts tracking, call FisherWidget.grantConsent() to enable analytics. For this approach, you can find further information here: Lead Generator - GDPR Configuration. 

consentGranted can be controlled: 

• in the "GDPR Consent granted" checkbox in the constructors
• with the "consentGranted" parameter directly in the HTML code snipped.