Wayin Support

How-to: Set up Micro Experience with Data Capture

Micro Experiences are a completely new format of mobile-first experiences with high-quality motion design and gesture controls, created to collect PII data in GDPR compliant way. This article will provide a guidance on how to set up Social Story Giveaway, Embeddable Giveaway, Micro Sign-up or any other Micro Experience with data capture fields.

Video Guide

What to do

First of all, navigate to the Wayin Experience Library click on the Micro Experiences tab in the navigation and select a Social Story Giveaway, Embeddable Giveaway or Micro Sign up  (creation process is the same), which will open a brief overview of the campaign type. If you are happy with your selection, add the experience to your account if you are using it for the first time, or simply click on Create if you have previously build the experience.

The wizard will take you through the experience 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 experience - 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 here. 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, the biggest difference is that you will be managing all your content modules and form fields in the same workspace to help you publish your beautiful experience 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 and form fields of the Experience, click on the Edit button of your Landing page. This will launch the Experience Editor. Use the navigation on the left hand side to work your way through the experience:

KBA_-_MX_navigation.png

  • Firstly, select the screen you want to edit.
  • Use drag & drop to add components to your experience. You will notice a Content Section and a Form Section. Content Section will only allow you to use components from the “Content” category, Form Section will allow both Content & Form components mixed together.
  • 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 ”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. 

Pro tip: You can also add a background video to some of the modules and Form Section. You can use a video of your liking uploaded to Youtube or MP4 file URL. We would recommend using simple loop videos no longer than 15s.

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. The Slide view will also display one form field at a time while the Page View displays all of them on the same page and you can scroll to see more.

3. Entries

In this section, you will be able to preview your entries as well as export all personal data. Please note that you will need sufficient user permissions to do so. We highly recommend to submit test data and download the export to make sure you are receiving data in the format you were expecting before the experience goes live.

4. 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.

5. Publishing

The final step is to publish your experience.

  • Select + Add Destination and choose one of 5 available formats:
    • 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