Skip to content
Contact support
  • There are no suggestions because the search field is empty.

iFrame your Board or Brand Guide

You can display your Pickit Brand Guide or Board on your own website by embedding it in an iFrame. Pickit provides the iFrame code snippet, but the implementation and hosting of the webpage are managed by your organization.

Before you begin

To embed a Brand Guide, you will need:

  • Access to the website or CMS where the Brand Guide will be displayed.
  • A person responsible for managing your website, such as a web administrator, developer, or external web agency.
  • The ID of the Brand Guide you want to embed.

Important: The iFrame code snippet must be implemented exactly as provided. Modifying the code may cause the embedded Brand Guide to display incorrectly or stop working altogether.


Find your Brand Guide ID

  1. Open the Brand Guide in Pickit.
  2. Preview the Brand Guide in a new tab.
  3. Copy the Brand Guide ID from the URL. 

Group 97

Add the iFrame snippet

Replace REPLACE_WITH_BRAND_ID in the code below with your Brand Guide ID.

 <iframe allowfullscreen id="pickit-embed" style="width: 100%; height: 100%; min-height: 100vh;" frameborder="0"></iframe>
<script>
var defaultUrl = "#/brand/REPLACE_WITH_BRAND_ID";
document.body.style.margin = 0;
var pickit=document.getElementById("pickit-embed"),childWindow=pickit.contentWindow;pickit.setAttribute("src",`${window.location.origin}?embed${window.location.hash && window.location.hash !== "#/" && window.location.hash !== "#" ? window.location.hash : defaultUrl}`),window.addEventListener("message",function(i){if(i.source===childWindow){var t=JSON.parse(i.data);"REDIRECT"===t.key&&(window.location.hash=t.value)}});
</script> 

Once updated, provide the code to the person responsible for your website or CMS and have them install it on the page where you want the Brand Guide to appear.

Note: Pickit cannot assist with implementing the code on third-party websites, CMS platforms, or custom web projects.


Troubleshooting

The Brand Guide loads, but the page looks broken

The iFrame has likely been embedded within an existing website template that affects its layout or styling.

Contact the person responsible for your website, CMS, or web agency for assistance. They will be best equipped to troubleshoot the page layout and styling.

The Brand Guide loads, but the deep links do not work

Parts of the original code snippet have likely been removed or modified. Reinstall the original code snippet exactly as provided, without any changes.

The iFrame is blank

If the code snippet has been installed without modification and the Brand Guide still does not appear, contact your Pickit Support. There may be an issue with the embedded Brand Guide that requires assistance from the Pickit team.