Creating a simple experience

This article covers how to create experiences such as swipe to reveal and scratch to reveal.


Getting Started

To begin creating your experience, select 'Create New' from the far right of the top navigation select and select your instant win experience.



Setup

Give your experience a name, select your language and timezone then choose the duration of your experience if required (optional).

Once you have selected your options, click next to proceed to the prize tab to create your prizes.



Prizes

Each experience requires prizes to be assigned to it and must have at least one unlimited option; this can be a 'Winner' or a 'Loser' prize. This section will outline how to configure individual prizes and to set the prize winning chances.


The simplest way to begin is to edit the pre-defined 'Winner' prize. Select edit by clicking the pencil icon under the 'Actions' header.


Once within the individual prize configuration, you can customise your prize:

  • Name - this will be the main customer name used for your prize, it will auto-populate onto success frames and will be available for mapping via any integrations you have enabled
  • Type - choose whether your prize will be a 'Winner' or a 'Loser'
  • Prize Type - choose between 'Rewards' or 'Vouchers'
    • 'Rewards' - this option is used when offering a non-unique promo code or will be fulfilling the prize via another platform possibly via an integration
    • 'Vouchers' - this option is used when you want to give away a unique voucher either via importing voucher codes or using a Voucher API (Shopify or Magento)
  • Number of Prizes - here you can choose the maximum number of this type of prize you'd like to give away or set it as unlimited (one unlimited prize is needed for every experience)
  • Email Template - if using our integrated email sending capabilities, this is where you can select the template to trigger when a prize has been successfully won
  • Notify Others - this option allows you to add an email address to be notified when this prize type is issued. This is useful when giving away high value prizes that you would like to monitor
  • Confetti Effect - here you can select whether to add a confetti effect when your prize is won such as adding stars. You may also import a custom image to use as confetti

  • Image - here you must add an image to be linked to your prize. This will automatically be populated onto the corresponding success frame but can be removed from there if needed
    • Gallery - here you can choose from any of your pre-uploaded images
    • Files - here you can upload an image from your computer

Once you have selected all of your options, you can then click 'Next' and repeat the above steps for each of your prizes you would like to be available.


Upon completing configuration for each of your prizes, select 'All Prizes' from the top left-hand corner to return to the main prize configuration page.


From here, you can then define the chances of winning each prize.


Please ensure you are happy with this distribution before putting the experience live. If in doubt, speak to your customer success manager.

Once your happy with the prize distribution, click the 'Studio' tab to begin customising the look and feel of your experience.




Experience Design

Each frame can be configured to match your requirements but overarching theme details can be set in the 'General' formatting found on the top left of the studio (paintbrush icon).

General

Within this section you can define the following formatting options:

  • Logo - here you can either upload or use an image saved to your gallery to display at the top of your experience (this can be switched off on a frame by frame basis if needed)
  • Background - here you can either select a colour or an image to display behind your experience. Images can be uploaded or taken from your gallery
  • Loading Spinner/ Image - here you can choose an image to show whilst customers are waiting for the experience to load (this is only needed if you're loading a particularly large experience)

Layout

  • Content position - here you can determine how the experience is aligned
  • Text Orientation - here you can choose the direction of flow text (useful when working with different languages)

Body

  • Background - here you can select a colour for the background of the main body of your experience
  • Header - here you can select a colour for the background of header section of your experience
  • Footer - here you can select a colour for the background of footer section of your experience
  • Fields - here you can select a colour for the background of your form fields
  • Fields focus - here you can select a colour which highlights a form field when it is being interacted with

Mobile (settings only used if you wish mobile to be different to desktop)

  • Background - here you can select an image to display behind your experience. Images can be uploaded or taken from your gallery
  • Backgrounds - here you can select a colour to display behind your experience.
  • Header - here you can select a colour for the background of header section of your experience
  • Footer - here you can select a colour for the background of footer section of your experience
  • Content - here you can select a colour for the background of the main body of your experience


Once you have set the experience formatting, you can move to customising specific frames in your experience.


Frame Settings

Each frame has it's own unique options for formatting and customisation but every frame has some consistent options which can be found by selecting the cog on the frame.

  • Hide logo - this allows you to choose not to show your logo on this specific frame
  • Desktop background - this allows you to select an alternative desktop background image for this specific frame
  • Mobile background - this allows you to select an alternative mobile background image for this specific frame
  • Tracking pixel - here you can add tracking to your experience

For details of specific frames, please view the specific help page (links below):


Static Components can be added to all frames but Field Components can only be used within Form frames. Further details on Static Components can be found here and Field Components here.


Success Frames

Once you have completed configuring your form and experience campaign mechanics, you can then move onto to customising what the last frame your customers will see should look like. We call these 'Success' frames; a frame will automatically be generated for each prize you setup earlier in the process:


Each 'Success' frame can be customised to your requirements including adding additional imagery, text and CTAs.


If you have chosen to giveaway a voucher code as your prize, here you can choose how you would like that to display by adding a "Voucher Codes" component. This can be in a text format, qr code or barcode. Qr codes and barcodes are generated by the Odicci platform.


Preview


Once you have completed the setup of your frames, you can preview your experience before publishing it.


You can preview on desktop by clicking the 'Preview' icon in the top right-hand corner (eye icon) and you can preview on your mobile device by hovering over the 'Mobile Preview' icon next and scanning the QR code.



Configuration


Before moving on to confirmation and publishing, you may wish to tweak the configuration of the experience. Most commonly this is used to define field mapping for any integrations in use but full details can be found here.



Confirm


Once you're happy with your experience, it's now time do some final checks before hitting publish. Any recommendations or blockers to going live will be highlighted to you and you can view more detail by clicking on the 'Expanded View'.


Once that last check has been completed, you can click 'Publish' to put your experience live and can find URLs to use or code for an iframe below.


Congratulations, your experience is now ready to use!