Certified Installer Badge Installation Guide

Build trust quickly with your customers whilst promoting the brands that you use by displaying our certified installer badges on your website!

There are a choice of badges available that will let your customers know that you are a certified installer, better still the badges link through to an online version of your certificate, allowing the customer to see the value of choosing you to install their roof (namely the training you've undertaken and the 20 year materials guarantee!)

STEP 1: Install Javascript Badge Library

Please place this javascript tag once on each of the pages where you wish to display any of our certified badges. Best practice is to place it at the bottom of the </body> tag. Be sure to place all badge tags AFTER this call to the badge library.

JAVASCRIPT

<script type="text/javascript" src="https://www.rubber4roofs.co.uk/installer_badge/js/badge.js">

 

STEP 2: Install Your Badge

There are two types of badge available to choose from: 

  1. Generic Certified Installer Logo
  2. Branded Certified Installer Banners (for ClassicBond, DuoPly and Resitrix)

You can place these badges anywhere on your site, either in headers, sidebars and footers for constant use throughout your site, or for single use on specific pages. Simply copy the relevant HTML and Javascript for the required badge onto your site and you're ready to go. If you wish to show the same badge multiple times please refer to our advanced settings.

Be sure to add your unique Certificate ID to the Javascript for each of the badge tags so we can authorise the correct use of the badge. If you've not been issued an online Certificate ID please contact our team so we can setup an account for you.

Please also ensure all badge Javascript tags are placed AFTER the call to the badge.js library otherwise the code will not work correctly.

 

Certified Installer Logo

Example Image Image Size Code
  Small
150px x 44px

HTML

<!-- Rubber4Roofs Certified Badge START --><span id="r4r-certified-logo-small">Certified Installer Logo</span><!-- Rubber4Roofs Certified Badge END -->

JAVASCRIPT

<script type="text/javascript">r4rInstaller('#r4r-certified-logo-small').badge({no:'YOUR-CERT-ID', type:'logo', size:'small'})</script>

  Medium
220px x 70px

HTML

<!-- Rubber4Roofs Certified Badge START --><span id="r4r-certified-logo-medium">Certified Installer Logo</span><!-- Rubber4Roofs Certified Badge END -->

JAVASCRIPT

<script type="text/javascript">r4rInstaller('#r4r-certified-logo-medium').badge({no:'YOUR-CERT-ID', type:'logo', size:'medium'})</script>

  Large
314px x 100px

HTML

<!-- Rubber4Roofs Certified Badge START --><span id="r4r-certified-logo-large">Certified Installer Logo</span><!-- Rubber4Roofs Certified Badge END -->

JAVASCRIPT

<script type="text/javascript">r4rInstaller('#r4r-certified-logo-large').badge({no:'YOUR-CERT-ID', type:'logo', size:'large'})</script>

 

ClassicBond Banner

Example Image Image Size Code
  Small
220px x 50px

HTML

<!-- Rubber4Roofs Certified Badge START --><span id="r4r-classicbond-banner-small">Certified Installer ClassicBond</span><!-- Rubber4Roofs Certified Badge END -->

JAVASCRIPT

<script type="text/javascript">r4rInstaller('#r4r-classicbond-banner-small').badge({no:'YOUR-CERT-ID', type:'banner', courses:['CB'], size:'small'})</script>

  Medium
320px x 73px

HTML

<!-- Rubber4Roofs Certified Badge START --><span id="r4r-classicbond-banner-medium">Certified Installer ClassicBond</span><!-- Rubber4Roofs Certified Badge END -->

JAVASCRIPT

<script type="text/javascript">r4rInstaller('#r4r-classicbond-banner-medium').badge({no:'YOUR-CERT-ID', type:'banner', courses:['CB'], size:'medium'})</script>

  Large
438px x 100px

HTML

<!-- Rubber4Roofs Certified Badge START --><span id="r4r-classicbond-banner-large">Certified Installer ClassicBond</span><!-- Rubber4Roofs Certified Badge END -->

JAVASCRIPT

<script type="text/javascript">r4rInstaller('#r4r-classicbond-banner-large').badge({no:'YOUR-CERT-ID', type:'banner', courses:['CB'], size:'large'})</script>

 

DuoPly Banner

Example Image Image Size Code
  Small
220px x 50px

HTML

<!-- Rubber4Roofs Certified Badge START --><span id="r4r-duoply-banner-small">Certified Installer DuoPly</span><!-- Rubber4Roofs Certified Badge END -->

JAVASCRIPT

<script type="text/javascript">r4rInstaller('#r4r-duoply-banner-small').badge({no:'YOUR-CERT-ID', type:'banner', courses:['DP'], size:'small'})</script>

  Medium
320px x 73px

HTML

<!-- Rubber4Roofs Certified Badge START --><span id="r4r-duoply-banner-medium">Certified Installer DuoPly</span><!-- Rubber4Roofs Certified Badge END -->

JAVASCRIPT

<script type="text/javascript">r4rInstaller('#r4r-duoply-banner-medium').badge({no:'YOUR-CERT-ID', type:'banner', courses:['DP'], size:'medium'})</script>

  Large
438px x 100px

HTML

<!-- Rubber4Roofs Certified Badge START --><span id="r4r-duoply-banner-large">Certified Installer DuoPly</span><!-- Rubber4Roofs Certified Badge END -->

JAVASCRIPT

<script type="text/javascript">r4rInstaller('#r4r-duoply-banner-large').badge({no:'YOUR-CERT-ID', type:'banner', courses:['DP'], size:'large'})</script>

 

Resitrix Banner

Example Image Image Size Code
  Small
220px x 50px

HTML

<!-- Rubber4Roofs Certified Badge START --><span id="r4r-resitrix-banner-small">Certified Installer Resitrix</span><!-- Rubber4Roofs Certified Badge END -->

JAVASCRIPT

<script type="text/javascript">r4rInstaller('#r4r-resitrix-banner-small').badge({no:'YOUR-CERT-ID', type:'banner', courses:['RX'], size:'small'})</script>

  Medium
320px x 73px

HTML

<!-- Rubber4Roofs Certified Badge START --><span id="r4r-resitrix-banner-medium">Certified Installer Resitrix</span><!-- Rubber4Roofs Certified Badge END -->

JAVASCRIPT

<script type="text/javascript">r4rInstaller('#r4r-resitrix-banner-medium').badge({no:'YOUR-CERT-ID', type:'banner', courses:['RX'], size:'medium'})</script>

  Large
438px x 100px

HTML

<!-- Rubber4Roofs Certified Badge START --><span id="r4r-resitrix-banner-large">Certified Installer Resitrix</span><!-- Rubber4Roofs Certified Badge END -->

JAVASCRIPT

<script type="text/javascript">r4rInstaller('#r4r-resitrix-banner-large').badge({no:'YOUR-CERT-ID', type:'banner', courses:['RX'], size:'large'})</script>

 

Error Messages

Error Reason Resolution
Invalid IP

For security reasons we restrict the use of an installers badges to just one website. 

You're receiving this error because the certificate has been setup to allow your badges to display on a different web server to the one you are trying to display them on.



 

To change your certificate to allow your badges to display on a different server please contact our team with the new IP (displayed in the error message) that you'd like us to assign to your certificate.
Invalid Domain For security reasons we restrict the use of an installers badges to just one website.

You're receiving this error because the certificate has been setup to allow your badges to display on a different web address to the one you are trying to display them on.

To change your certificate to allow your badges to display on a different domain please contact our team with the new domain (displayed in the error message) that you'd like us to assign to your certificate.
Invalid Certificate

Certificate Not Found

The Certificate ID that you supplied in the badge javascript tag doesn't match our records.

Please double check that you've configured your javascript with the correct Certificate ID that was issued to you. 

Your Certificate ID is a unique 32 character string.

 

Certificate Pending

The Certificate ID that you supplied in the badge javascript tag has been found but isn't active.

Please get in touch with our team to request that your online certificate be activated.
 

Certificate Revoked

The Certificate ID that you supplied in the badge javascript tag has been found but has been revoked.

Please get in touch with our team to discuss your account.
Invalid Badge

Invalid Badge Type

The value you've supplied within the badge javascript tag for the "type" variable is unrecognised.

There are two badge types to choose from:

logo = will display the generic certified logo
banner = will display one of the branded certified banners

  Invalid Badge Size

The value you've supplied within the badge javascript tag for the "size" variable is unrecognised.

There are three possible badge sizes to choose from:

small, medium, large

Please refer to the advanced settings for the specific dimentions of each.

  Invalid Badge Courses

The values you've supplied within the badge javascript tag for the "courses" array is unrecognised.

The course codes that are not recognised will be displayed in the error message. You can use these to diagnose what you need to resolve.

You can only list course codes that you have completed training for. The available options are as follows:

CB = ClassicBond
DP = DuoPly
RX = Resitrix

The courses setting is only required for displaying banner badges.

Badge Unavailable The server that provides the badges to your site is not responding. Please contact our team to let us know that the certified badge service is unavailable.

 

Advanced Settings

What follows is a breakdown of the HTML and Javascript, allowing more advanced use of the badges.

Customising the Badge Appearance (Javascript)

Example Javascript

r4rInstaller('#HTML-ELEMENT-ID').badge({ no:'YOUR-CERT-ID', type:'BADGE-TYPE', size:'BADGE-SIZE', courses:['COURSE-1', 'COURSE-2', 'COURSE-n'] })

Badge Options

Variable Importance Default Value Accepted Values and Usage
no Required N/A

Your online Certificate ID.

A unique 32 character string issued to you by Rubber4Roofs when you signup for an online certificate.

no:'40cccad2ac57c29035a432356f3c978d'

type Optional If omitted type will be presumed banner

Defines the type of badge to display

type:'logo'

Value Description
logo Displays the generic Certified Installer Logo Badge
banner

Displays one of the branded Certified Installer Banners (either ClassicBond, DuoPly or Resitrix). 

The brand to display is chosen using the courses variable

size Optional If omitted size will be presumed large

The physical dimensions of the badge will be dependant on the type of badge requested and the size of visible space available on your webpage.

All the badges are responsive, meaning they will scale to fit the available size on your page, displaying up to a maximum size as defined in the values here:

size:'small'

Value Logo Maximum Size Banner Maximum Size
small 150px x 44px 220px x 50px
medium 220px x 70px 320px x 73px
large 314px x 100px 438px x 100px
courses Optional

If omitted on logo: alt-text will list all the accredited courses associated with this certificate

If omitted on banner: image and alt-text will default to the first course associated with this certificate

This array of courses has two uses dependant on the type of badge being displayed:

1. Logo - Allows you to control which of the acrredited courses are mentioned in the Alt-text of the badge image and in which order.

courses:['CB','RX','DP']

2. Banner - Defines which brand to display. If multiple courses are provided, only the first will be used and all subsequent courses will have no effect on the badge display.

courses:['RX']

Value Use with Logo Use with Banner
CB Displays Certified Logo and includes ClassicBond in Alt-text  Displays Classicbond Banner and only ClassicBond Alt-text 
DP Displays Certified Logo and includes DuoPly in Alt-text  Displays DuoPly Banner and only DuoPly Alt-text 
RX Displays Certified Logo and includes Resitrix in Alt-text  Displays Resitrix Banner and only Resitrix Alt-text 

 

Customising the Badge Location (HTML)

The code snippets provided above offer sample HTML to use on your webpage. The HTML code determines where the badge image will be displayed on your page. The Javascript is then used to load the badge once your certification has been validated. 

Simply create your HTML with an element ID and refer to that ID within the r4rInstaller object of that particular tag. 

r4rInstaller('#YOUR-HTML-ELEMENT-ID')

The HTML element can appear anywhere on your page and can be any legitimate HTML tag (i.e. <span>, <div> etc). Onload the badge will be displayed in place of that HTML element.

 

Displaying the same badge multiple times

Should you wish to display the same badge multiple times on the same webpage you will need to have a new set of badge code for each badge required.

Whilst the Javascript will mostly remain the same (given you require the same badge settings), you will need to ensure that each badge instance has a unique HTML element ID to target.

r4rInstaller('#INSTALLER-BADGE-1')

r4rInstaller('#INSTALLER-BADGE-2')

 

no comments