Wayin Support

How-to: Set up Social & Embeddable Story

Social and Embeddable Stories are immersive slide or scroll-based experiences optimised for smaller screens and spaces. Just select one of our mobile-first themes with animations, use drag and drop to add your branded content and finish your story with compelling CTA to see the results.

Video Guide

What to do

First of all, navigate to the Wayin App Store, click on the Content Pages tab in the navigation and select a Social or Embeddable Story App (creation process is the same for both), which will open a brief overview of the campaign type. If you are happy with your selection, Add the app to your account if you are using it for the first time, or simply click on Create if you have previously build the experience before.

The wizard will take you through the app creation process:

  • First of all, name your experience and click next.
  • After that, choose a theme. You will be able to select one of two dedicated themes for story apps - Block (simpler, less stylized theme that is using system fonts) or Tint (theme with design functionality that is tinting images, copy and CTA to a predefined colour, using Google fonts).
  • On the launch timing screen, you can choose to schedule the launch timing. Schedule a launch date and time if you’re aware of this during setup, or simply click Choose later.
  • At the end of the wizard, you will be presented with an overview of the campaign setup so far. If you’re happy, click Create to finalise your settings and create the campaign.

Experience set up

If you are familiar with the Wayin Experiences, you may notice we have made some changes to the workspace. We have streamlined and simplified the workflow to help you publish your beautiful experiences even faster.

1. Build

In this area, you can add, edit, preview and layout screens, pages and slides in your experience using a drag-and-drop designer. You can also select a different Theme as well as upload a Background image.

To start customising content of the Experience, click on the e Edit button in ‘Start Here’ area. This will launch the Experience Editor.

  • Firstly, add your components to your experience by hovering over the component and clicking on + Add.
  • You can reposition, clone or delete individual components in the dynamic preview on the right hand side.
  • To start editing a component, hover over the component on the right hand side and click on e 'Edit'.
    • In the Content tab, you can add your copy, upload or select an image, as well as background image. Background image selection will open up a new set of design settings that will allow you to further customise the experience. (Note: If you select Fixed position for Background scroll, you will achieve a slick parallax scrolling effect.)
    • In the Design tab, you can select a different Layout for positioning of images and copy, Style (applicable for Tint theme), Invert colours (this will automatically change the font colour from dark to light), as well as define the Text alignment. In Advanced options, you can define a Custom class name if you wish to use custom CSS and Display height - this will be useful if you want to fill the full viewport of a device with content of one component only).
    • Don’t forget to Apply or Save your changes in top right hand corner before leaving the editor.

2. Settings

In Settings, you can rename your experience and select a different display type. Page view will allow users to scroll up and down through your experience, while in Slide view, users will be able to navigate between individual slides from left to right and back.

3. Customize

If you need to further customize your experience with custom code, you can do so in the Customize area. Simply add a custom CSS or Javascript, you can always reference the custom classname that can be defined in each individual component.

4. Publishing

The final step is to publish your experience.

  • Approve your experience. 
  • Select + Add Destination and choose one of 5 available formats (If any of the options are greyed out, you will need to Connect that channel. Read this article to learn more.):
    • Twitter Story - use this smart URL in an organic or promoted social post
    • Facebook Story - use this smart URL in an organic or promoted social post
    • Instagram Story - use this smart URL to add behind a CTA in a set up of your organic or promoted social story
    • Snapchat Story - use this smart URL to add behind a CTA in a set up of your organic or promoted social story
    • Page embed - this generates an embed code to be used on your website, blog, article, ad-unit and more
  • Following this, the platform wizard will ask you to specify the dates and timings for the campaign’s launch, whether you wish to publish this experience immediately or schedule it to go live at a later date.
  • All that’s left to do is to confirm you want to Publish the experience.
  • All set? You can now sit back and watch its progress by checking insights.

We have also created step-by-step guides explaining how to add Micro Experiences URL in Social Stories, how to add Micro Experiences URL in Twitter Card and how to embed them in Google Experience Manager.

Understanding the navigation 

Now when you have progressed through the set up and publishing of your experience, you may have noticed that the navigation with your experience name is visible throughout the journey. From the navigation, you can take the following actions: 

  • Delete an experience by hovering over the c and clicking on Delete experience
  • Click on & to open the staging URL where you can preview your experience 
  • Approve, Publish or Expire the experience
  • Save any changes you have made on the campaign level