Experience Builder

In this article, we will cover:

• What is Experience Builder
• How to add an Experience Builder
• What type of Experience Builders you can add
• How to change the settings on the Experience
• How to add a TINT board to your Experience
• How to delete, reorder and add a block
• How to edit an Image block on an Experience
• How to edit the Form on an Experience
• How to view the report
• How to use custom fonts
• How to set custom domains

• How to add Experience Builder feed to your TINT board

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.   

How to add an Experience Builder

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

What types of Experiences

There's lots of different experiences that you can add depending 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

Get to know the Experience Builder

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 view 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 , 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 

If you want 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
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           
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. 

 

 

Add a TINT board to your experience

In all experiences, you can embed a TINT board.  To do this, go into your experience and click the pencil to edit. 

This will open a pop up box with two tabs: Content and Design.

In Content, you choose the content that you want to display.

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.

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

In Design, you can set styles for your TINT section.

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 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  next to the block header. 

You can also change the order of the blocks.  Click on this 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 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 - Add a form 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 an Image block on an Experience

To edit an image block, click on the pencil to edit.

This will open a pop-up box with two tabs: Content and Design.

In Content, you will be able to upload your image.  If you want to replace the image, simply upload another image and that will replace the current image.
In Design, you can resize and style the background
Image width - Resize the image by its width.  Change the range from 1% to 100% and see it change on the left-hand size in real-time so you can judge on how big or small you need the image.  Any other kind of editing, you would need to do before you upload your image.
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 edit the Form on an Experience

On our Contest and Sweepstakes Experience builder, you have a box with a Form option. 
To change the settings, click on the pencil to edit.

This will open a pop-up box with two tabs: Content and Design.

In Content, you can edit the fields below to customize your Form.
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.

 

 

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

BUTTON TEXT - Change the text of the Submit button

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 - Add a link to your T&Cs and change how the wording appears for the tickbox
PRIVACY POLICY - Add a link to your Privacy Policy and change how the wording appears for the tickbox
CONTEST RULES - Add a link to the contest rules and change how the wording appears for the tickbox
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

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

This will bring up the report itself and you can either show the analytics or the download report as a CSV file.

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

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

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 a 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"