Experience Builder

In this article, we will cover:

What is Experience Builder

They are pre-built layouts that require no coding to enable you to create fast and elegant UGC experiences in minutes.   

mceclip3.png

How to add an Experience Builder

  1. Click on the megaphone
  2. Click on Add an Experience

mceclip0.png

What types of Experiences can you add 

There are lots of different experiences that you can add depending on what you need or want to do.

  • Landing Page - A landing page where you can use customizable building blocks including galleries powered by UGC to boost interaction and drive conversions
  • Sweepstakes - A page where your visitors have a chance to win whilst interacting with real content from other users 
  • Contest - A page where you incentivize your audience to provide you with great UGC content whilst giving them a chance to win.
  • Virtual Event - A page where you can host your virtual event paired with a TINT gallery to capture content, questions, and feedback directly (Video upload 1GB max or Live Stream link from Facebook, YouTube, Vimeo, Twitch, or TikTok)
  • Influencer Brief - A landing page where you can structure your influencer brief
  • Link in Bio - A landing page that is the perfect Link In Bio page with your TINTboard with your chosen content with the ability to add customizable Call to Actions
  • Countdown -  A page to generate excitement and urgency for upcoming launches and announcements
  • Contributor App - A page where influencers upload content that can be used in campaigns
  • Interactive Poll - A page where you can place a UGC-powered poll to drive interaction with your brand
  • Tag-o-war - create a hashtag “battle” — pitting UGC from two different hashtags against each other to see which one is more popular
  • Survey - A page where you can add a survey customized to your needs
  • Social Feed Counter - A page where you can showcase hashtags and content engagement on user-generated content galleries with real-time metrics

mceclip0.png

Get to know the Experience Builder Menu

 

 

Back button This will take you back to the Experience List
Name of the Experience This will be named untitled but you have the ability to edit it here or in the settings
Device options See how your Experience looks on a desktop, tablet or mobile
Language options This adds a dropdown on your experience so your experience can be built and viewed in multiple languages
Preview See how it looks before you publish it
Publish Publish your experience. This button will turn green when you make changes to your experience. 
If you get the following error message when you click publish mceclip5.png, this means that you haven't edited or set up all relevant blocks to publish your Experience. 
Settings Change the settings on your experience.  See the following section for a more in-depth look.

 

How to change the settings on your Experience 

  1. To change the settings on your Experience, click on the settings cog and the following options will appear:
Project Name What is the name of your project

 




Experience_Settings.png

Page Title What do you want the Page title to be
Slug / Friendly URL What do you want the Slug / Friendly URL to be 
Upload Favicon

Upload your Favicon here which is a a file containing one or more small icons associated with your website or web page 

For example, TINT's is            TINT__1_.png

Google Analytics or Google Tag Manager (GTM) Here you can put your Google Analytics Account Number to link Google Analytics for visitor tracking and other reporting or Google Tag Manager to enable out-of-the-box changes to your Experience pages.   If you would like to utilize both options, you would pick Google Tag Manager and set up Google Analytics via GTM
Description Here you can put a meta description. This will appear in search engine results pages
Select Custom Domain
Here you can select the custom domain that you have input previously.  For more information on Custom Domains and how to set it up in TINT, click here
Block Searching Index This enables you to prevent the experience from appearing in Google Search.  Select Yes/No as an option.
Enable Cookie Banner

This enables you to provide a Cookie Banner which gives in-depth information about how the site uses cookies. Select Yes/No as an option.
The user has the option to allow or decline optional cookies and if the user wants to manage these cookies at the bottom of the Experience page. 

Cookie

 

How to add a TINT board to your experience

In all experiences, you can embed a TINT board.  

  1. Go into your experience
  2. Navigate to the TINT Board Block
  3. Click the pencil to edit
    TINTboard.png
  4. This will open a pop-up box menu with two tabs: Content and Design.
  5. Once you have made all your changes, click Apply to save your choices

Content:

TINT Select which TINT board you want to use

 






PERSONALIZATION

Select which theme and personalization you want to use.  If it doesn't let you select anything here, then go to your TINT board, go to personalization and personalize it to how you would like it to look.

Advanced Settings:

HEIGHT TYPE

"Unlimited" - the TINT board is as long as it is content posts
"Fixed" - that TINT board has a set height which you can define so it will only take up the set space.
DISPLAY TYPE "Click here for more Button" - loads more posts on your TINT Board when a button is clicked.
"Infinite Scroll" - automatically loads more posts on your TINT Board as you scroll down.
# OF COLUMNS Choose how many columns of posts you want. This also can be left blank so the width of the screen will define this.
SAVED FILTERS Choose any of your saved filters that you have set for your TINT board so you can tailor it more to the experience you are building.

 

Design:

 

Section Padding:

Choose how much space you want above and below the TINT board section
SECTION BACKGROUND COLOR:  Change the background color of the padding around the TINT board
BACKGROUND IMAGE:  Add a background image by clicking the upload buttons below. You can add up to three images that are optimized for various sizes - Desktop, Tablet and Mobile.

 

How to delete, reorder and add a block

You can add different blocks to your Experience pages.  All experience pages come with set blocks.  Some of the blocks you can delete and you will see mceclip3.png next to the block header. Be careful as when you delete a block, you can't undo this and the content of that block will be gone. Also some blocks can't be re-add, for example, the Banner block.  Other blocks you can't remove and it will show  mceclip4.png next to the block header. 

You can also change the order of the blocks.  Click on this mceclip5.png and a popup box will appear in the right-hand side so you can move the blocks around. 

To add an extra block: 

Click on the blue plus sign mceclip0.png at the bottom of a block. It will give you the following options to choose from:

Headline
Add a title
Paragraph Add a paragraph section
TINT

Add another TINT board

Button

Add button with a link

Counter

Add a social feed counter to see how many posts you get on a set time period

Timer 

Add countdown block

Spacer

Add a blank space in between your blocks 

Social

Add the social page with all your social links (Instagram, Facebook, Twitter, Tiktok, LinkedIN, Youtube, Pinterest, Tumblr and Vimeo)

Form Builder

Add a form that you have created in Form Builder to your Experience

Multi-Column

Add 2 or 3 blocks in one block 

 

Image

Add an Image block

Video

Add a Video block

How to edit the default Form on an Experience

On our Contest and Sweepstakes Experience builder, you have a box with a Form option. Not to be confused with our Form Builder.  If you prefer to use the form that you have designed yourself, you can delete this block and replace it with Form Builder Block but please beware, you are unable to re-add the default Form once deleted.

  1. Navigate to the block Form
  2. Click on the pencil to edit
  3. This will open a pop-up box with two tabs: Content and Design. 
  4. In Content, you can add/change the Display Advanced Settings, Form Input Fields, Add Element, Upload Settings, Legal Links and Submission End Time
  5. In Design, you can add/change the Section Padding, Background color and the ability to add a background image for Desktop, Tablet and Mobile.
  6. Click Apply to save your choices

Content:  

DISPLAY ADVANCED SETTINGS - 

Yes/no option.  Turning this on enables you to edit the Form Field ID of the elements. This means that you can rename the labels that you see in the report at the top and when you pick which elements you want to be published when you add the submissions to your feed on your TINT board.  For example, on Form Input 3, you might want it to say Surname as your label instead of Last Name.

Untitled_design__9_.gif

 

 

FORM INPUT 1, 2 AND 3 - 

 

These are pre-populated and can be deleted or changed.  You also have a tickbox that says REQUIRED which when ticked will reflect in the form as a * next to the element to let the user know that it is a required section to fill in.  If unticked, it allows to the users to choose the option to fill in the element or not. 

All_the_elements.png

Add Element

Add a different element to make the form

Input - One line of text

Textarea - Expandable lines of text

Dropdown - a line for adding different dropdown options

Checkbox - an area for adding different checkbox options

UPLOAD SETTINGS:

UPLOAD LIMIT

Have the option of Upload Multiple Files or Upload single so you can choose if the user uploads multiple or just one picture or video.



UPLOAD BUTTON TEXT

Change the text of the Upload area

UPLOAD ERROR TEXT

Change the text of the Upload error that appears when the 
REQUIRED FIELD TEXT

 

Change the wording next to the *
UPLOADING REQUIRED
Tick box yes/no

LEGAL LINKS:

 

TERMS & CONDITIONS / Upload Terms

Add a link to your T&Cs and change how the wording appears for the tickbox

Upload your T&Cs








PRIVACY POLICY / Upload Privacy Policy

Add a link to your Privacy Policy and change how the wording appears for the tickbox

Upload your Privacy Policy

CONTEST RULES / Upload Contest Rules 

Add a link to the contest rules and change how the wording appears for the tickbox

Upload your Contest Rules

OPT IN MESSAGE

Add another tickbox with an opt-in message.  For example, yes, I want to receive emails from ...

OPT IN DESCRIPTION

Add the opt-in description to add underneath the opt-in Message
Edit Success Message Change the success message and/or add a link 
SUBMISSION END TIME
Add an end time here so the page stops taking submissions by a set date

*uploading settings only appear in the Contest Experience

Design:

Form Styles:
FORM FIELD TEXT COLOR The color of the text displayed within the input fields








INPUT BORDER COLOR The color of the border for the input fields

BUTTON COLOR

The background color of the buttons

BUTTON TEXT COLOR

The color of the text on the buttons

TERMS & CONDITIONS COLOR

The color of the T&Cs text

CONTEST RULES COLOR

The color of the contest rules text

PRIVACY POLICY COLOR

The color of the privacy policy text 
OPT COLOR The color of the opting in text 
REQUIRED LABEL COLOR
The color of labels for fields that are mandatory to fill out
ERROR COLOR
The color used to highlight errors or invalid entries in the form
Background Image:
Section Padding The padding for the form block 
SECTION BACKGROUND COLOR The background color of the form block
BACKGROUND IMAGE Add a background image by clicking the upload buttons below. You can add up to three images that are optimized for various sizes - Desktop, Tablet and Mobile

 

How to edit a Form Builder block

With the addition of Form Builder to TINT, where you can build embeddable forms, we have added this to our Experience Builder offering as a block.  This is not the same as the default form block, you will find on the Contest and Sweepstakes Experiences. This Form Builder block is available on all experiences and you can delete the default Form from Contest and Sweepstakes experiences, however, please beware that you are unable to re-add the default form block once deleted.
  1. Navigate to the Form Builder block
  2. Click on the pencil to open the editing menu
  3. This will open a pop-up box with two tabs: Content and Design. 
  4. In Content, you will choose the Form Builder form that you have already created from the dropbox down.  If you haven't created a form yet, exit this menu and go to the Form Builder icon on the left hand.  To get started, click here
  5. In Design, you can add/change the Section Padding, Background color and the ability to add a background image for Desktop, Tablet and Mobile.
  6. Click Apply to save your choices

Content:

Form Connect your Form Builder by selecting the specific form from the list below which is populated from your own Form Builder List mceclip4.png

 

Design: 

Section Padding The padding for the form block 
SECTION BACKGROUND COLOR The background color of the form block
BACKGROUND IMAGE Add a background image by clicking the upload buttons below. You can add up to three images that are optimized for various sizes - Desktop, Tablet and Mobile

 

How to view the report

If you want to view a report on the information you have collected on a Sweepstakes, Contest, Contributor App, Poll, or Survey Experience, go to the following:

  1. Click on the megaphone
  2. Click on the ... on the experience you want the report for
  3. Click on View Report

How to View Report - ExB - 16th November 2023.gif

How to download the form report and all media files via the Experience report view

  1. Click on ... next to the Experience Builder page that you would like the report for
  2. Click on View Report
  3. Click on Download 
  4. This will bring up a popup window on the right-hand side
  5. Then pick the date range and if you want to download the media files at the same time.   
  6. Click Export which will open a small pop-up saying downloading your submission file.  Please beware that this could take a few minutes if you have a lot of submissions and/or media files. 
  7. Once complete, it will say click to download
  8. Click on the link and this should trigger it to download to your device

How to download report and files via the Experience report view - ExB - 14th November.gif

How to use custom fonts

You can change the font in the Experience Builder by uploading the Font you want to use. 

  1. Click on the settings cog in Experience Builder next to the "Add an Experience"
  2. Click on Custom Font
  3. Upload your custom font.  Supported fonts are .otf and .woff
  4. Click done

Untitled_design__5_.gif

You can find your font at the bottom of the list when editing text.  Here's an example: 

Screenshot_2022-03-24_at_10.33.07.jpg

How to set a custom domain

The Custom Domain feature allows you to create a unique URL that fits with your brand. Click here for more information on how to set up on and configure this in TINT.

How to add Experience Builder feed to your TINT board

If you want to add your Experience Builder submission into your TINT board, you have to connect an Experience Builder feed to it.

To do this, you will need an up-and-running Experience and the TINT board. To add the feed:

  1. Go to your TINT board
  2. Click on Show More Networks in Content
  3. Click on Experience Builder
  4. A pop-up box will appear on the right-hand side with the following options:
    SELECT EXPERIENCE: Choose which Experience you want to add
    SELECT AUTHOR NAME: Choose the field that you want to map to the post’s author name section.  All the elements that you choose in the "Add Element" section on the form part of the Experience Builder plus the Form Input 1, 2 or/and 3 will appear in this dropdown box.
    POST BODY: Choose the field that you want to map to the post’s body content section. All the elements that you choose to put in the "Add Element" plus the Form Input 1, 2 or/and 3 will appear in this dropdown box.
    Choose to switch moderation on/off by leaving "I would like to manually approve posts before they appear publicly on my TINT." ticked or unticked
  5. Once filled in click on "Add Social Feed"

New_Editor_ExB_image.gif

 

If you have any additional questions regarding Experience Builder, please contact Technical Support at support@tintup.com.

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

Comments

0 comments

Please sign in to leave a comment.