This article outlines how to add the ArchiPro badges to your own website
Last Edited - Friday 16th August 2024
How to add the ArchiPro badge to your website
Why use the ArchiPro badge?
ArchiPro badges can be added to your website to act as a sign-post for your visitors to view your profile, project case studies or products on our site.
Adding the ArchiPro badge to your website can improve your organic Google ranking for your ArchiPro profile, which will create additional online visibility.
You can choose to place one of the below badges on your website, depending on your preferred colour:
.png?width=168&height=61&name=Black%20(1).png)
.png?width=168&height=61&name=White%20(1).png)
To add the badge on your website, you will need help from a website developer, but it should be a quick and easy task for them to complete as it is only one line of code.
You only need to place the coded badge on your website once and any updates to the design will automatically update the badge on your site.
How to add the ArchiPro badge to your website
Please copy the text below and send this to your website developer:
Place this script inside the <head> tag:
<script src="https://badge.archipro.co.nz/ap-badge.js"></script>
Place this code inside the <body> or the <footer> tag where you'd like the badge to show up:
<ap-badge href="archipro-url-to-your-projects-products-or-profile" theme="black/white" size="pixel-width-of-badge" transparent />
You will need to edit the second piece of code above to include the following:
- href - this can be any of your product or project URLs where you'd like your visitors to go to when they click the badge; can also be a link to your profile on ArchiPro;
- theme - this sets the colour of the badge. You can choose black or white. Any other value will show up as white.
- size - this sets the width of the badge. You can add the exact pixel width you desire and the height will scale automatically, with an aspect ratio of 2.75:1
- transparent - this can be used to make the background of the logo transparent. To use a badge with a transparent background, you can simply keep the transparent parameter at the end of the code, as shown above. To use a badge with an opaque background, remove the 'transparent' parameter from the code.
Questions
How do I add the badge to a Squarespace website?
You can find out how to add custom code to a Squarespace website here.
How do I add the badge to a Wix website?
You can find out how to add custom code to a Wix website here.