App Stories

Follow

App Stories

App stories interactive content carousel that can be added to the top of the home screen within our apps.

Each story is made up of a sequence of images that are shown in a fixed order, for a fixed amount of time.

Customers familiar with stories on Instagram and other social media services will recognise the concept of these stories, and are likely to know how to use the simple controls.

In the Poq CMS you can:

See your existing stories

The Stories area in the CMS displays a list of your existing stories, including information about each one:

  • Draft or Current list of stories
  • Preview of the cover image
  • Scrolling preview of the cards in a selected story
  • Story title
  • Cards - the number of cards in the image
  • The date published.
  • The date on which the information is true.

Tip You can change the date to see a snapshot of your scheduled stories in the future or past.

Add a new Story

When you add a new story, you do so by creating a new draft. When you're happy with the new story, and its content, you can publish it or schedule it to be published in the future.

To add a new app story:

  1. On the App Stories screen, click Draft. The draft screen is displayed.

  2. Click Add story.

  3. Enter the required details in the Add Story form:


    app-story-add.png

    1. Story title - this is used in analytics for your app.
    2. Upload a cover picture - this is also the preview image for your story.
    3. Click Create.
  1. On the Story Details screen, click Add Story Card.

    app-story-content.png

  2. Add the card details:

    1. Image for the story card, using the guidelines shown. Recommended ratio is 16:9
    2. Title of the card.
    3. Autoplay length for this card - the length of time the card is displayed on the screen. Default time is 4 seconds, maximum is 30 seconds.
    4. Action type - link to a category, product, video or weblink.
  1. Complete the required details for your chosen action type.

  2. Click Save. You can now add further story cards until your story is ready to publish.

  3. Continue to add story cards until your story is complete.

  4. Use the date picker in the top right of the screen to schedule publications dates of your story. If you leave these blank, the story will be published indefinitely.

  5. In the Draft screen, click Publish.

You have added a new story.

Story card action types

You can choose different actions that your customer can perform to interact with your story card:

app-story-types.png

Default

Selecting the default action type means the card will have no actions for your customers and will simply show the story card.

Category

If you choose a Category action type, your customers can swipe up to see the range of products in your chosen category.

From this view, they can tap to see the product list screen for the category.

Note: The Category action type is only available in Version 14.2 and higher.

app-story-category.png

To add a Category action type to your story card:

  1. In the story card details form, select the action type Category from the dropdown list.

  2. Enter an instruction in the Action label field. For example, Swipe up to shop. You have a maximum 20 characters for this label.

  3. In the Category table, search for your required category by name.

  4. Select the required category from your search results.

  5. Click Save.

You have added the Category action type to your story card.

Product

The Product action type allows your customer to swipe up to see a list of individual products you have selected.

app-story-product.png

To add a Product action type to your story card:

  1. In the story card details form, select the action type Productfrom the dropdown list.

  2. Enter an instruction in the Action text field. For example, Swipe up to shop. You have a maximum 20 characters for this label.

  3. In the Products table, search for your required products by name.

  4. Select the required product from your search results.

  5. Click Save.

You have added the Product action type to your story card.

Add a Weblink action type to create a link to a website. This will be opened within your app as a webview.

app-story-weblink.png

To add a Weblink action type:

  1. In the story card details form, select the action type Weblink from the dropdown list.

  2. Enter an instruction in the Action label field. For example, Tap for our blog. You have a maximum 20 characters for this label.

  3. In the URL field, add the web address.

  4. Click Save.

You have added the Weblink action type to your story card.

Video

Add the video action type to add an MP4 video to your story card. Customers swipe the card and the video automatically plays in a full-screen, native player.

app-story-video.png

To add a Video action type:

  1. In the story card details form, select the action type Video from the dropdown list.

  2. Enter an instruction in the Action label field. For example, Swipe for video. You have a maximum 20 characters for this label.

  3. In the URL field, add the location of the MP4 video.

  4. Click Save.

You have added the Video action type to your story card.

Circular Stories

Circular stories feature images within a circular frame, in the style of popular social media stories like Instagram.

The appearance of the control panel for circular stories is slightly different from regular stories, but the process for creating and editing stories remains the same.

app-story-circular.png

Image dimensions for circular stories

Use square images for your cover photos, with the main image content in a circle that touches the four sides of the square.

The recommended dimensions for circular story images are: 400 x 400

download.png

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments