Create an interactive folder

When you upload a pdf to Spott it will turn into a folder, that folder can be shared as an interactive folder/catalog

Create an interactive catalogue

Press + Folder on the projects page
Enter a folder name
Add new or move existing projects into the newly created folder

How can you add/remove/reorder pages

Open the folder inside the Studio (see above)

Screenshot_2022-09-26_at_10.31.20.png

Reorder pages:
- Select a page from the page list (left menu) and drop it on the preferred location. The order is saved automatically
Add pages:
- Select "+ Add page" on the top right side of the page.
- The media dialog will appear, select/upload the media you want to make interactive
- Click "Insert", a new page has been created
Delete a page:
- Select the garbage icon next to the page and click on it:
- WARNING: this action will remove your entire project, incl all your interactivity! If you still need this project you can always move the page outside the folder. This can be done on the projects page by clicking the context menu on > Move to folder:

How can you share a folder

Open the folder by clicking: "Open folder in Studio"
Click on the "Publish" tab
- We have a couple of ways to share a catalogue
  - Share Link
    - Sharable link which can be used on social media as link, send over via Whatsapp, Messenger, Mail, ...
  - Embed into your website
    - IFrame: This will load the entire folder/catalogue from the Spott domain inside an iframe. Place the entire <iframe tag on the preferred location in your website code (between the <body> tags).
    - Javascript: Include a javascript inside the <head> of your website and add a special <div> element into your website. This special <div> has some data-attributes so our script knows the location of your folder. If you have multiple folders on the same page, you only need to include the script 1 single time, and change the data-attributes with the corresponding folder ids.
      
      Another advantage of using the JavaScript version is the possibility to have a fullscreen vertical scroll on mobile:

What can you customize?

Single page: Displays the folder on a single page instead of a two-page catalog
Scale down: applies a lower resolution so that the catalog loads faster
Spott branding: Add/remove the Spott branding on your content
Language: This allows you to change the display language of your products

Lazy load folder (JavaScript version only)

It is possible to lazy load the Javascript version of our folder. This can be accomplished by executing the following init methods with properties like: folderId, button/font color (vertical scroll on mobile):

function loadFolderJS(){
 initFlyer(document.getElementById('folderPlaceholder'), 
 {
  flyerId: "xxx-xxx-xxx-xxx", 
  verticalScrollOnMobile: true, 
  openButtonFontColor: "FFFFFF",
  openButtonFontSize: 24,
  openButtonBackgroundColor: "6f4df7",
  openButtonLabel: "Open folder!", 
  pageHeight: 1218, 
  pageWidth: 842
 });
}

The JS method can be execute when the folder is in the viewport of your website or when you click on a button, ... for example:

<div id="folderPlaceholder" />
<button onclick="loadFolderJS();">Lazy load folder now!</button>