Part 1: copy your embed code from HB Flipbook
Step 1: Publish the flipbook
The embed only shows your flipbook once it's published.Step 2: Open Share → Embed
In the editor, go to the Share tab and select Embed.Step 3: Choose a size
Leave Responsive on to fit the width of the space you paste it into, or turn it off and set a fixed Width and Height.Step 4: Adjust the reader
Choose the Start page, Viewer mode, background, corners and which controls appear. The Live Preview updates as you go.Step 5: Copy Embed Code
Press Copy Embed Code. Your settings are saved with the publication.
Part 2: add it to Squarespace
Step 1: Edit the page
In Squarespace, open the page and select Edit.Step 2: Add a Code block
Click an insert point (or Add Block) and choose Code.Step 3: Paste the embed code
Paste the code from HB Flipbook into the block. Keep the block's mode set to HTML and turn off any option to display the code as source text.Step 4: Size the block
Stretch the block to the width you want. A responsive embed fills that width and adjusts its own height.Step 5: Save and check the live page
Save, then open the live page to confirm the flipbook loads.
After it's embedded
Edits you make to the flipbook in HB Flipbook show up in the embed automatically. If you change embed settings such as size or controls, copy the new code and replace the old one. Views from embedded readers are counted in your flipbook views.
Frequently asked questions
Is there an HB Flipbook extension for Squarespace?
No. You use Squarespace's built-in Code block with the standard embed code.
Why can't I find the Code block?
Squarespace only offers Code blocks on some of its plans. Check your Squarespace plan if the block isn't in the list.
The flipbook doesn't appear in the editor preview.
Squarespace may not run embedded code while you're editing. Save and view the live page to check it.
Can the flipbook be full width?
Yes. Keep Responsive on in HB Flipbook and place the Code block in a full-width section.