Uploading and embedding issuu books

Uploading and Embedding ISSUU Flipping Books 1) Go to www.issuu.com and ‘Sign In’ using the Web Team’s account. Once in you should see the RHUL crest in the top-left.

2) Click on the ‘Upload’ link from the main menu.

3) In the resulting screen select the PDF you’d like to convert by either dragging it into the upload area, or by simply browsing for it.

NB The exact same version of this PDF should already be uploaded to Contensis!

You’ll be shown a progress bar as the document is uploaded.

4) Enter some basic details about your publication, leaving the ‘preview’ and ‘download’ options unchecked. Once complete, click the ‘Publish now’ button.

5) When finished, click on the ‘My Publications’ link.

6) Depending on the size and complexity of your publication, you may see a holding image stating that it is still being updated. This will eventually be replaced by the cover image of your publication as per the example below:

7) Click on the cover of your publication and from the resulting menu, choose ‘Share’ followed by ‘Website or blog’.

8) You should now be in the ‘Embed Widget’ section which has several options you’ll need to set. These may already be available as ‘Style1’ – see section 9. If not, use the details below:

Size: Second option (525 wide) Starting page: 1 Page layout: double with ‘Autoflip the pages’ checked Custom background colour: Checked and set to #C6CDD1 Download: Always unchecked Social options menu: Checked Links below embedding: Unchecked Reader background color: Unchecked Reader background image: Unchecked Share button: Checked Search button: Checked My other publications: Unchecked Add your logo: Checked and set to: http://www.rhul.ac.uk/SiteElements/Images/RoyalHollowaylogo-ISSUU.png 9) Once finished copy the ‘Embed code’ from the bottom of the page and then open up Contensis

10) Create a new include file, with a meaningful and unique name, in the section or department you are adding the Flipping Book too. Paste the embed-code copied from the ISSUU website into this include file.

11) The embed code contains an empty DIV tag and, as Contensis currently strips these out, you’ll need to copy and paste the following code into it: <p>ISSUU</p> Save and approve the include file. The end result should look like something like this: <div data-configid="1576673/5663403" style="width: 525px; height: 371px;" class="issuuembed"><p>ISSUU</p></div><script type="text/javascript" src="//e.issuu.com/embed.js" async="true"></script>

12) Create a new page from the standard template; this is the page where you would like to show the Flipping Book. Drag the ‘ISSUUWithDownload’ component, by its icon, from /components/developers/issuu/ and into the main placeholder immediately after the default content text, then delete that text. You should end up with the following:

13) Drag the include file you created and approved in part 11 into the ISSUU placeholder:

14) Save and then preview the page. You may briefly see the “ISSUU” text from the previously empty DIV in the top-left of the placeholder whilst it’s loading, but this will be replaced by the Flipping Book almost immediately:

15) Now that the book is working, all that’s left is to link the ‘Download the PDF’ icon to the Contensis-held version of the document.

Click on the icon (1) and then click on the ‘Edit Hyperlink’ button (2). Change the default ‘URL’ and #-tag settings (3) to ‘CMS Content’ and then browse to the PDF. Save the Hyperlink, and then save and approve the page.

Check the live version of the page is working as expected and that the PDF link opens the correct document.