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:
- Generic Certified Installer Logo
- 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
JAVASCRIPT
|
|
|
Medium 220px x 70px |
HTML
JAVASCRIPT
|
|
|
Large 314px x 100px |
HTML
JAVASCRIPT
|
ClassicBond Banner
| Example Image | Image Size | Code |
|
Small 220px x 50px |
HTML
JAVASCRIPT
|
|
|
Medium 320px x 73px |
HTML
JAVASCRIPT
|
|
|
Large 438px x 100px |
HTML
JAVASCRIPT
|
DuoPly Banner
| Example Image | Image Size | Code |
|
Small 220px x 50px |
HTML
JAVASCRIPT
|
|
|
Medium 320px x 73px |
HTML
JAVASCRIPT
|
|
|
Large 438px x 100px |
HTML
JAVASCRIPT
|
Resitrix Banner
| Example Image | Image Size | Code |
|
Small 220px x 50px |
HTML
JAVASCRIPT
|
|
|
Medium 320px x 73px |
HTML
JAVASCRIPT
|
|
|
Large 438px x 100px |
HTML
JAVASCRIPT
|
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 |
|
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: 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.
|
||||||||||||
| type | Optional | If omitted type will be presumed banner |
Defines the type of badge to display
|
||||||||||||
| 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:
|
||||||||||||
| 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.
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.
|
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')