Experience Builder

In this article, we will cover:

• What is Experience Builder
• How to add an Experience Builder
• What types of Experiences can you add
• Get to know the Experience Builder Menu
• 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 the default Form on an Experience
• How to edit a Form Builder block
• How to view the report
• How to download the form report and all files via the Experience report view
• How to use custom fonts
• How to set custom domains
• How to archive an Experience Builder page
• How to unarchive an Experience Builder page
• How to bulk archive Experience Builder pages
• How to bulk unarchive Experience Builder pages
• How to delete an Experience Builder page
• How to bulk delete Experience Builder Pages
• 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 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

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

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

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

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 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 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 archive an Experience Builder page

1. Click on ... next to the Experience Builder Page you want to archive
2. Click on Archive
3. The Experience Builder Page will archive and disappear to just under the last active Experience Builder Pages when you refresh your page so you have more than a page of Experience Builder Page, you may find it a couple of pages back
4. If you have the link to the Experience Builder Page live somewhere, you will see the following error message when displayed: We could not fetch this experience

How to unarchive an Experience Builder page

1. Click on ... next to the Experience Builder Page you want to unarchive
2. Click on Unarchive
3. The Experience Builder Page will reactivate and go back to the position it was in before the archive when the page has been refreshed

How to bulk archive Experience Builder pages

1. Select the Experience Builder Pages you would like to archive by using the tickboxes
2. A small pop-up will appear at the bottom of the list
3. Click Archive
4. The Experience Builder Page will archive and disappear to just under the last active Experience Builder Pages when you refresh your page so you have more than a page of Experience Builder Page, you may find it a couple of pages back
5. If you have the link to the Experience Builder Page live somewhere, you will see the following error message when displayed: We could not fetch this experience

How to bulk unarchive Experience Builder pages

1. Select the Experience Builder Page you would like to unarchive by using the tickboxes
2. A small pop-up will appear at the bottom of the list
3. Click Unarchive
4. The Experience Builder page will reappear in the order that they were previously in when the page has been refreshed.  

How to delete an Experience Builder page

To delete an Experience Builder Page, you can only do this when it has been archived.

1. Click on ... next to the Experience Builder Page you want to delete
2. Click on Delete
3. The Experience Builder Page will be deleted

How to bulk delete Experience Builder Pages

1. Select the Experience Builder Pages you would like to delete by using the tickboxes
2. A small pop-up will appear at the bottom of the list
3. Click ...
4. Click Delete
5. These will automatically deleted and disappear from your list

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"
   

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