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

  1. Press + Folder on the projects page

    Screenshot_2022-09-26_at_10.27.28.png

  2. Enter a folder name
  3. 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

  1. Reorder pages:
    • Select a page from the page list (left menu) and drop it on the preferred location. The order is saved automatically
  2. 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
  3. Delete a page:
    • Select the garbage icon next to the page and click on it:

      Screenshot_2022-09-26_at_10.36.41.png

    • 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:

      Screenshot_2022-09-26_at_10.39.26.png

 

How can you share a folder

  1. Open the folder by clicking: "Open folder in Studio"

    Screenshot_2022-09-26_at_10.26.35.png
  2. Click on the "Publish" tab

    Screenshot_2022-09-26_at_10.40.40.png

    • 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:

          Screenshot_2022-09-26_at_10.55.10.png Screenshot_2022-09-26_at_10.53.28.png

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>
Was this article helpful?
0 out of 3 found this helpful

Comments

0 comments

Article is closed for comments.