LeadConverter
      Back to home
      1. Canibuild Help Center
      2. LeadConverter

      How to Embed the LeadConverter Widget Onto Your Website

      This article provides a complete overview of embedding the Canibuild Widget & Search Bar onto your website. This ensures your visitors can search for an address on your front page and be redirected to your landing page where the LeadConverter loads.


      The Canibuild LeadConverter is supplementary to a webpage's content and
      does not directly impact SEO. It is embedded via JavaScript and an iFrame,
      which does not index as "content" for search engines like Google. However, it
      can enhance engagement and time spent on-site, indirectly benefiting SEO. It
      functions similarly to an embedded Google map or YouTube clip. 

      TYPE The LeadConverter uses JavaScript and iFrame. 
      SEO IMPACT No direct SEO impact. 
      SECURITY Relies on unique API tokens for pre-nominated domains; hosted securely on AWS servers.
      PERFORMANCE Uses a script tag to inject the app after the Dom Content Loaded event, ensuring no initial page load issues

      Key Points

      • Host Names: Must be correctly entered in the widget settings, otherwise the embed will not load.

      • Embed Code Quotes: Sometimes quotation marks in the copied code may paste incorrectly. Replace them with standard double quotes if needed.

      • ID Matching: The id in the <div> must match the id in the script for the widget to load.

      • Styling: Adjusting widget height with CSS ensures the widget fits neatly on the page without overlapping content.

      • Tokens: Always use a valid data-token for the widget to display properly.

       

      There are 3 embed scripts that you will need to add to your website:

      1. LeadConverter Widget Embedding Code
      2. LeadConverter Search Bar Embedding Code
      3. Website Visitor Tracking Code

      How to Embed the LeadConverter Widget Onto Your Website

      • Access the Admin section by clicking on your initials on the top right corner of the screen.
      • Select Admin from the dropdown menu.

      • Click LeadConverter in the left side panel.

      • Click Create Widget to add a new widget.

      OR
      • Select the Reference Name of the Widget you would like to embed on your website.

      • Select Settings.
      • Scroll down to Host names.
      • Enter the website URL (Domain Name) where the widget will be embedded.

      Only add the first part of your website address. Example, if you would like to embed the widget at the following website address: mywebsite.com/home, you would just enter mywebsite.com as the Host name.

      • Press Enter or Return to add.
      • Click Update to save.

      • Select Summary.
      • Copy the Embedding Code.

      Your Embedding code may look different to the one displayed below. Note the key elements highlighted in blue will be unique to your account. 


      Embed within high-priority pages with relevant content for better SEO.

      • Paste the code into your website’s HTML at the desired location.
      • Locate the id parameter inside the script. (YOUR_HTML_ELEMENT_ID)

      Check the quotation marks in the code. If they look incorrect, replace them with normal double quotes ("). Sometimes they can change when copied.

      • Copy this id value (or replace it with a string of your choice).

      • Create a div on your webpage with the same id as in the script.

      • Ensure the code also includes your valid data-token, which loads your widget into the div.

      • Save your webpage and refresh the browser to check that the widget loads.

      If the widget height is too long, apply a custom CSS class to adjust the size. 


      • Add this class to your widget’s div to ensure it fits neatly on the page.

      • Refresh the page and confirm the widget displays correctly.

       

      How to Embed the LeadConverter Search Bar

      • Access the Admin section by clicking on your initials on the top right corner of the screen.
      • Select Admin from the dropdown menu.

      • Click LeadConverter in the left side panel.

      • Click Create Widget to add a new widget.

      OR

      • Select the Reference Name of the Widget you would like to embed on your website.

      • Select Summary.
      • Click Copy Search Bar Script.

      • Click the Copy button to copy the embed code.
      • Standard Implementation: For quick and easy implementation, simply copy the top script in the Embed Script section.
      • Advanced Implementation: If you would like to be able to customize the Search Bar, copy the bottom script in the Customisation Script section. This method will require custom coding.

      This code is going to be added to the main section of your website code the same as the widget.

      • Paste the embed code into your website’s front page HTML where you want the search bar to appear.

      Review the quotation marks in the code carefully. If they appear to be incorrect, replace them with standard single quotes ('). This issue may arise during the copying process. Additionally, ensure that the data-token corresponds accurately with the embedding code.

      • Save and refresh the page to confirm the search bar appears.

      After creating the search bar you can apply styling to improve it's appearance. You can add styles inline or apply a CSS class such as:

      • Create the class for your style similar to the code below.
      • Adjust the Width & Height to fit your website.
      • Add the class to the div.

      • In Widget Settings find the Search Bar Landing URL field.
      • Copy the full URL of your landing page

      This is the full URL from your page eg: yoursite.com/searchbar.html 

      • Paste the URL into the Search Bar Landing URL field.
      • Click Update.

      • Type an address to confirm it redirects to your landing page correctly.

      • On the landing page, test the widget by placing a house, moving or rotating it, and checking that contact forms work as expected.

       

      How to Embed the Website Visitor Tracking Code

      The Website Visitor Tracking Code allows you to capture data on the amount of website visitors you have, and what % of those use the LeadConverter widget, and submit their details. This allows us to provide this data back to you in a visual dashboard to help you understand the performance and results of your LeadConverter widget.

      • Copy the relevant script (based on your country) and embed into the global section of your website code i.e your header or footer.

      If United States:

      <script
        data-id="canibuild-tracker"
        data-token="{Insert Your Token ID Number}"
        data-country="USA"
        type="module"
        src="https://widget.prod.cloud.verumtek.com.au/tracker-prod.js">
      </script>

      If Canada:

      <script
        data-id="canibuild-tracker"
        data-token="{Insert Your Token ID Number}"
        data-country="CAN"
        type="module"
        src="https://widget.prod.cloud.verumtek.com.au/tracker-prod.js">
      </script>

      If Australia:

      <script
        data-id="canibuild-tracker"
        data-token="{Insert Your Token ID Number}"
        data-country="AUS"
        type="module"
        src="https://widget.prod.cloud.verumtek.com.au/tracker-prod.js">
      </script>

      If New Zealand:

      <script
        data-id="canibuild-tracker"
        data-token="{Insert Your Token ID Number}"
        data-country="NZL"
        type="module"
        src="https://widget.prod.cloud.verumtek.com.au/tracker-prod.js">
      </script>

      Make sure to replace the section of script that says {Insert Your Token ID Number} with your unique Token ID Number which you can find and copy from your Embed Script.

      image (7)-1

      Best Practice Guide

      Click here to view our LeadConverter Implementation Best Practice Guide to get tips how to achieve the greatest performance from your LeadConverter widget.