Adding Story Collections in your website or app is easy!

To get started, create a Story Collection in the Interactivity section of your workspace. Once created, your Collection will look like this:

Collections can either be embedded in your website or accessed through an API.

Embed a collection

You want to show the collection on a page of your website. Perfect, you're in the right place. Here are the two steps you need to take:

Pick a theme

The theme defines the look of the embed. The Light theme works great for bright websites, the Dark theme is perfect for darker websites.

You can also choose to not have a theme, in which case the font, background and text color will match your website. This gives you the most flexibility, as you can style your embed with CSS.

Add the script to your website

Copy the code starting with <script and add it to the HTML of your website where you want the collection to show up. If you don't know how to do this, we recommend you involve a developer.

Note that some platforms (like WordPress) do not support <script> embeds. That's why we created the <iframe> embed in case the script doesn't work for you. Simply copy the <iframe> code and paste it where you want the collection to show up.

We strongly recommend you use the script if you can, as it allows SEO crawlers to discover your Stories, loads faster, and is easier to style.

Use the API

Do you want to create a custom interface or interaction? Then our API is what you're looking for. By scrolling down past the embed options, you'll find the collection's API endpoint.

Simply call that endpoint with a GET method and you'll receive a JSON representation of the collection.

Here's a sample response:

[
  {
    "id": "ChOu2ONPU7TAMF3v1RYSm",
    "url": "https://capauwels.tappable.link/gestalt",
    "title": "Gestalt Theory",
    "description": "Six principles of design in Gestalt Theory",
    "image": "https://capauwels.tappable.link/p/ChOu2ONPU7TAMF3v1RYSm.jpg",
    "color": "rgb(15, 25, 35)"
  },
  {
    "id": "1CfJLBDvdB3eZxb8nMEVr",
    "url": "https://capauwels.tappable.link/stratos",
    "title": "Stratos",
    "description": "Mission to the edge of space",
    "image": "https://capauwels.tappable.link/p/1CfJLBDvdB3eZxb8nMEVr.jpg",
    "color": "rgb(0, 22, 43)"
  },
  {
    "id": "j1EJhNfnGP8fFk3OV6dS9",
    "url": "https://capauwels.tappable.link/landing-stories",
    "title": "Landing Stories",
    "description": "7 reasons why companies use Landing Stories",
    "image": "https://capauwels.tappable.link/p/j1EJhNfnGP8fFk3OV6dS9.jpg?w=1200&h=630&fit=crop",
    "color": "rgb(198, 161, 121)"
  },
  {
    "id": "Bg7mvS_Px9hh0H46vT4A_",
    "url": "https://capauwels.tappable.link/fattoush",
    "title": "Fattoush salad",
    "description": "Make a deliciously fresh Fattoush salad in 7 easy steps",
    "image": "https://capauwels.tappable.link/p/Bg7mvS_Px9hh0H46vT4A_.jpg",
    "color": "rgb(240, 240, 244)"
  }
]

There is no authentication required, as it's a public API. Responses are cached, so it might take a few minutes for collection changes to propagate.