iFrame Embed Code

• iFrame Embed Code
• Advantages of using iFrame Embed Code

On May 5th, 2021, we have released an updated version of our embed feature. This means that the previous iFrame codes were changed to responsive ones. 

If you would like to keep the old version of the embedded code, please uncheck the Responsive box.

iFrame Embed Code

We have simplified the Embed code and it will be available only in the form of iFrame code.

We haven't changed any functionality regarding embed at our end. You should be able to embed your content through iFrame embed code without any problem because this solution is compatible with all CMS. It's more secure and we can easily add more features on top of this solution.

Unfortunately, it is not possible to fetch Embed Config Ids anymore. 

Advantages of using iFrame Embed Code

• Global Embed Customization:  

You can create Global Embed Customization to embed each of your publication. You only need to change publication URL in the embed code. The URL of publication is defined by two parameters; username of your account and name of the document

https://issuu.com/{username}/docs/{documentname}

• If you want to change the style of your existing embed, you do not need to do this in the embed UI on Issuu anymore. You can simply edit the embed code on your website/blog.

Example: 

1. If you want to make changes in the below embed code, you can directly change the parameters in the embed code (see highlighted part in iFrame code) and embed on your website/blog.

<iframe allowfullscreen allow="fullscreen" style="border:none;width:100%;height:326px;" src="//e.issuu.com/embed.html?backgroundColor=%23ebb88a&backgroundColorFullscreen=%23ebb88a&d=orange_juice_issue_1_b0ceb817d77d59&hideIssuuLogo=false&hideShareButton=true&pageNumber=6&u=ds_demo"></iframe>

• pageNumber=7
• hideShareButton=false
• hideIssuuLogo=true

2. If you want to change the background color of your publication, you simply need to replace the background color code in the iFrame embed code.

<iframe allowfullscreen allow="fullscreen" style="border:none;width:100%;height:326px;" src="//e.issuu.com/embed.html?backgroundColor=%23bf978e&backgroundColorFullscreen=%23bf978e&d=ds_demo_magazine__1_2faf8932b75b94&u=ds_demo"></iframe>

3. Similarly, if you want to change the background image of your publication, you simply need to replace the background image URL in the iFrame embed code.

<iframe allowfullscreen allow="fullscreen" style="border:none;width:100%;height:326px;" src="//e.issuu.com/embed.html?backgroundImageUrl=https%3A%2F%2Fcdn.pixabay.com%2Fphoto%2F2016%2F07%2F23%2F23%2F02%2Flavender-1537694_1280.jpg&d=ds_demo_magazine__1_2faf8932b75b94&u=ds_demo"></iframe>