Advanced usage

To have full control over TrueQuote on your website, you can add our script tag inside your HTML, just above the </body> tag.

Once added to your page, you can then configure your own buttons, place a <div> exactly where you want our quote engine to load, or do both.

Loading from your own buttons

You can add the script to every page on your website. As long as you have a button somewhere on your webpage with an id that begins #truequotebutton, our quote engine will load in the background and wait for the user to press your button.

For example, here is the HTML for a simple button:

<button id="#truequotebutton">
  Get a Quote
</button>

If you want to launch our quote engine from more than one button, simply add a number to the end of the id. For example, here is the HTML for two buttons on your page — #truequotebutton1 and #truequotebutton2:

<button id="#truequotebutton1">
  Get a Quote
</button>
<button id="#truequotebutton2">
  Get a Quote
</button>

When any of these buttons appears on the page and you click it, our quote engine will load. Using your own buttons gives you complete control of your webpage design and lets you launch our quote engine from anywhere.

Loading from your own <div>

While you can load our quote engine from your own button, you may also want to take advantage of our quote engine design to display our call to action and full landing page options.

To do this, simply add a <div> with an id of #truequotecta to the part of your webpage where you want our quote engine to load:

<div id="#truequotecta"/>

When our quote engine loads, it looks for buttons and one div — to either launch from a button and/or display the quote engine on a specific part of the page.

You can also do both. Launching from your own button and using our design for your call-to-action would look something like this:

<html>
  <head>
    <title>My Installer Website</title>
  </head>
  <body>
    <header>
      <menu>Home</menu>
      <menu><button id="#truequotebutton">Get a Quote</button></menu>
      <menu>Contact Us</menu>
    </header>
    <div id="#truequotecta"/>
    <footer>
      <p>(c) MyInstallerWebsite</p>
    </footer>
    <script async defer id="truequote_script" src="https://truequote.co.uk/quote/[INSTALLER-ID]/js"></script>
  </body>
</html>

Important

If you add our script to your page just above the </body> tag and do not have any buttons or a div with an id of #truequotecta on your page, our quote engine will automatically load and appear at the bottom of your page.

Progress

7 / 8 read88%