Log into the Sparkhub app

Landing Page Tip: How To Embed an Issuu Catalog

Nov 09, 2023

Do you have a catalog hosted on issuu.com that you want to share with your audience?

Perhaps you've noticed that your company shows the catalog on their website, without the viewer having to click to open it at issuu.com. Did you know you can do the same thing, on your very own Project Broadcast Landing Page? 

(Create landing pages - even with a free account - in Project Broadcast by joining here.)

This is a great way to let your page viewers browse the catalog without leaving your site to do so. You can surround the catalog with content and buttons to give them YOUR unique introduction to what you have to offer!

Just follow these steps.

Step 1: Identify publication info inside the URL of your catalog

For instance, if the URL is 

https://issuu.com/pamperedchef/docs/pamperedchef-fw23-us-catalog

Then the user ID is pamperedchef and the document ID is pamperedchef-fw23-us-catalog

Step 2: Add the code to your PBLP

Create an HTML block and paste in the following:

<div style="position:relative;padding-top:max(60%,326px);height:0;width:100%">

<iframe sandbox="allow-top-navigation allow-top-navigation-by-user-activation allow-downloads allow-scripts allow-same-origin allow-popups allow-modals allow-popups-to-escape-sandbox" allowfullscreen="true" style="position:absolute;border:none;width:100%;height:100%;left:0;right:0;top:0;bottom:0;" 

src="https://e.issuu.com/embed.html?backgroundColor=%23{hexcode}&d={document}&u={user}">

</iframe>

</div>

Step 3: Customize the "src" in your code to point to the desired publication

  • Replace {hexcode} with your six-character hex code of choice, which will configure the background color. (For example, ffffff will produce a white background.)
  • Replace {document} with your document name, which you identified in the URL - in our example it is pamperedchef-fw23-us-catalog
  • Replace {user} with the document's user name, which you identified in the URL - in our example, it is pamperedchef
  • Be sure to remove the curly brackets too.

Step 4: Save and test!

Save your design and open the link in a new browser tab or window. (While you can preview the design inside PB, opening in a browser is the best way to preview, because it ensures your code executes fully.)