Personalization

In this article, we will cover:

• How to get started with Personalization
• How to add a new personalization
• How to rename your personalization
• How to archive a Personalization
• How to unarchive a Personalization 
• How to bulk archive Personalizations
• How to bulk unarchive Personalizations
• How to delete a Personalization
• What options can you choose when personalizing your TINT
• How to see your TINT in different device views
• How to preview multiple TINTs with the same personalization
• Why and how to duplicate your Personalizations

After Creating a TINT and Adding Content, it's time for you to choose how you'd like all of that content to appear. TINT allows you to style your display through the use of any number of pre-built themes. Then, make further adjustments to items like background color, font, font size, and more! You may even apply your own CSS styles.

How to get started with Personalization

To get on to personalization, there are two ways: 

If you are already in a TINT, simply select the Personalize button on the left-hand side of the page and this will take you to a new page - Personalizations List.

If you are on your launchpad, go to TINT boards and click the personalization button and this takes you to the same page as above - Personalizations list.

On the Personalization list, you have the option to make a new personalization or click the arrow on a previous personalization.
In this list, you will see your migrated personalizations from the TINT’s old version of personalization. To make it easier to see which personalization belongs to which TINT, we have put the TINT’s name in the personalization title. Another way to tell, a migrated personalization versus a new one is that the old personalization will have N/A for the omnichannel type whereas any of the new personalizations will tell you which type it is. 

With the new way of implementing personalizations, you can make one personalization and apply it to many TINTs.

How to add a new personalization

To create a new personalization, click on “+ Add”

This will take you to a list of different Omnichannel Publishing Types:

• Website Embed - Create a gallery embed for your website.
  • • Compatible themes: Classic, Horizontal Slider, Square Photo, Tall Photo, Testimonials, Artsy, News, Grid, Archived Classic,  Archived Horizontal Slider, Archived Square Photo, Archived Tall Photo, Archived News and Legacy Classic
• Signage Display - Create real-time dynamic displays for your audience.
  • • Compatible themes: Classic, Square Photo, Tall Photo, Testimonials, Artsy, News, Grid, Slideshow, Ticker, Gem, Mosaic, Atmosphere, Archived Classic, Archived Square Photo, Archived Tall Photo, Archived News, Archived Atmosphere and Legacy Classic
• Email - Create a dynamic gallery for your email template. 
  • • Available themes: Grid and Collage
• SmartTile - Create a custom tile to embed on your website. (coming soon)
• Ad Unit - Create an ad unit to embed on your website. (coming soon)
• Ratings and Reviews - Create a gallery to collect and display ratings and reviews on your website.
  • • Available themes: Table
• Shoppable Gallery - Create a shoppable gallery embed for your website
  • • Compatible themes: Horizontal Slider, Square Photo, Tall Photo, Archived Horizontal Slider, Archived Square Photo and Archived Tall Photo
• Virtual Event - Create a web gallery for your virtual event.
  • • Compatible themes: Classic, Horizontal Slider, Square Photo, Tall Photo, Testimonials, Artsy, News, Grid, Slideshow, Ticker, Gem, Mosaic, Atmosphere, Archived Classic,  Archived Horizontal Slider, Archived Square Photo, Archived Tall Photo, Archived News, Archived Gem, Archived Atmosphere and Legacy Classic
• Live Event - Create a display wall for your live event.
  • • Compatible themes: Classic, Square Photo, Tall Photo, Testimonials, Artsy, News, Grid, Slideshow, Photo Slideshow, Ticker, Gem, Mosaic, Atmosphere, Archived Classic, Archived Square Photo, Archived Tall Photo, Archived News, Archived Gem, Archived Atmosphere and Legacy Classic
• Mobile Gallery - Create a mobile-optimized gallery to showcase UGC on your website or mobile app.
  • • Compatible themes: Horizontal Slider, Square Photo, Tall Photo, Archived Horizontal Slider, Archived Square Photo and Archived Tall Photo
• API - Looking for something else? Create something unique with the TINT API. (View Documentation) - This is not a selectable option.

How to rename your personalization

All new personalizations default to Untitled personalization as a name.  To change this, click on the Untitled personalization on the right-hand side of the builder.  

If this is an existing personalization that has been migrated from our old personalizations, this might already have a name or might be called Personalization 1.  With the migrated personalizations, the TINT board it came from is named in brackets and can be deleted. 

How to archive a Personalization

1. Click on ... next to the personalization you want to archive
2. Click on Archive
3. The Personalization will archive and disappear to just under the last active personalization when you refresh your page so you have more than a page of Personalizations, you may find it a couple of pages back
4. If this Personalization is displayed anywhere, this will cause an error on the TINT board embed and will display the following error: Something went wrong. Please contact support.

How to unarchive a Personalization 

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

How to bulk archive Personalizations

1. Select the Personalizations 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 Personalizations will archive and disappear when the page has been refreshed. It might end up on another page if you have more than a page worth of Personalization but the TINT boards will remain selected
5. If these Personalizations are displayed anywhere, this will cause an error on the TINT board embeds and will display the following error: Something went wrong. Please contact support.

How to bulk unarchive Personalizations

1. Select the Personalizations 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 Personalizations will reappear in the order that they were previously in when the page has been refreshed.  

How to delete a Personalization

To delete a Personalization, you can only do this when it has been archived.

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

What options can you choose when personalizing your TINT?

These options will be the same for new and existing personalization. Not all of these options will show as they are based on which theme you choose.

• Theme Settings

• • Autoscroll - tickbox option if you want your posts to visibly scroll*
    • • Auto Scroll Speed - choose how fast you want the scroll to be
      • Highlight Post - this option is only available when you have auto-scroll ticked and will make posts pop up and disappear
        • • Transition speed - choose how long you want time-wise in between posts popping up
          • Duration - pick how long you want the post to stay on the screen
  • Highlight Posts - Only available on Signage Personalization - tickbox option if you want the pop-ups to be highlighted
    
    • Transition Speed - How fast the highlighted pop-ups transition from one to the next
    • Duration - How long the highlighted pop-ups stays on the screen

* the Public Add a Post button will disappear if Autoscroll is switched on

For Gem theme

• • Wave Direction - Up, Down, Right or Left - which direction you want your posts to move in  
  • Post Highlight duration - choose how long you want the post to stay on the screen or if you don't want highlights 
  • Post Shape - Circle, Round, or Square - which shape you would like for your posts to be displayed in
  • Gem Amount - None, A Little, or A Lot - how many gems you would like to see in between your post
  • Color Palette - what color shade you would like your gems in

For Email-Hyper personalization theme

• • • • Images per Row (only available on Grid) - how many posts are in a row
      • Rows - how many rows of posts to display
      • Spacing - how much spacing there is in between the posts
      • Overlay Color - a layer of hue used to change the color of the posts
      • Overlay Opacity - how light or dark the overlay color is over the posts
      • Image
        • Fill - the image will crop to fill the post
        • Fit - the post will fit the image, keeping its original aspect ratio.
      • Post Background Color - changes the color of the post background when the post is set on fit

• Background 
  • Color - choose or change the color for the background
  • Transparent - tickbox option if you want a transparent background
  • Background Image - Upload a background image
  • Banner - Upload a banner

• Fonts
  • Font - select font type or upload your own
  • Font Color - change the color of the font
  • Font Size - change the size of the font using the scrollbar
  • Accent Color - change the color for the social media navigation and search bar, the share button, and links on the post.  Initially, this will also make your public post button (if you have one) the same color but you are able to change this in the next section
• Public Posting Style (optional if you have a public posting feed)
  • Button Attribution
    • Button Text - tick option to change what text says for the button you click on to get the public post popup to load
    • Button Color - tick the option to change the color for the font.  If not ticked, the accent color will apply
  • Photo and Caption 
    • Post Image Placeholder - change the text that appears above the button when you upload your files
    • Description Placeholder - change the text where you put a comment about the files that you are uploading

• • Author Name and Photo

• • • Author Image Label - change the text that appears as the author’s image label which appears next to the upload button
    • Name Label - change the text that appears on the label for the author’s name
    • Name Placeholder - change what the name is

• • Title and Button
    • Modal Title - change what the title of the public post is
    • Required Text - change what text appears when you don’t fill in a required section
    • Submit Button - change the text that appears on the button
    • Terms Text - change the text that appears where your terms and conditions are 
    • Terms Link - copy the link for your terms and conditions
    • Form Error Text - change the text that appears when there’s an error with the form

• Popup 
  • Font - select font type or upload your own
  • Font Color - tickbox option to choose a color for the font.  If not ticked, the default color will apply
  • Author Font Color -  tickbox option to choose a color for the author.  If not ticked, the default color will apply
  • Author Username Font Color -  tickbox option to choose a color for the author username.  If not ticked, the default color will apply
  • Link Font Color - tickbox option to choose a color for the link.  If not ticked, the default color will apply
  • Background Color - tickbox option to choose a color for the background of the pop-up.  If not ticked, the default color will apply
  • Image Background Color - tickbox option to choose a color for the image background of the popup.  If not ticked, the default color will apply
  • Lightbox Background Color -  tickbox option to choose a color for the lightbox background of the popup.  If not ticked, the default color will apply
  • Description Font Size - slidable option to choose what description font size is
  • Product List Header Title - change what product list header title is
  • Product Header Font Size -  slidable option to choose what header title font size is
  • Product Font Size - slidable option to choose what product font size is
  • Product Price Font Size - slidable option to choose what price font size is
  • Product Header Font Color - change the font color of the product header
  • Product Price Font Color - change the font color of the product price
  • Product Image Outline Color - change the color of the product Image Outline
  • Product Background Color - change the color of the product background
  • Hide description - tickbox option to hide the description of the post
  • Show author name -  tickbox option choose to show the author’s name on the post or not
  • Show author username - tickbox option choose to show the author’s username on the post or not
  • Show Timestamp - tickbox option choose to show timestamp on the post or not
  • Small, Normal, Large - selectable options to change the size of the font on the post
  • Show Video Control - this enables the video controls to appear at the bottom of a video so the user can for example unmute the volume, pause the video ...

• CTA (Call to Action) - This section comes up when you have set up CTAs on your posts
  • Text Color - change the color of the text
  • Button Color - change the color of the button
  • Transparent - tickbox option for transparent button or not
  • Both / Post / Pop Up - choose if you want the CTA button to be on both the post and pop up or on the post or on the pop-up
• Extra
  • Show share icons - tickbox option to choose if you want the posts to be share or not
    • Facebook / LinkedIN / Email / Twitter / Pinterest - select or unselect which ones you want to show
  • Show post author 
  • Remove duplicate images - remove any images that are the same (useful when you have moderation unlock off)
  • Language for Post Stamp - choose a language you want the post time stamp to appear in 
  • Generic Author Avatar Background Color
  • Minimum Post Width - slidable option to choose what the minimum width of the post will be
  • Post Spacing - slidable option to choose how much space you want in between the posts
  • Theme Layout - selectable options on how you want Horizontal Slider theme to look
    • Show Text - text will appear next to the post in Horizontal Slider theme
    • Text On Hover - text will appear on the post when you hover  in Horizontal Slider theme
    • Only Image - Only the image will appear in Horizontal Slider theme
  • Slide Variant - choose which way you want your slider to appear
    • Slider -  Change the appearance of the posts to Slider in Horizontal Slider theme
    • Carousel - Change the appearance of the posts to Carousel in Horizontal Slider theme
  • Post Background Color - choose or change the color of the background on the post
  • Post Duration - choose or change how long the post pop-up for
  • In-Line Video Playback 
  • Highlight Video Playback - Selectable options on how you want your videos to play
    • Don’t Auto Play Video 
    • Auto Play Entire Video
    • Auto Play Video to Transition

• Custom CSS
• Edit Theme - Put any CSS you want to use to change the theme here and save
• Edit Pop-Up - Put any CSS you want to use to change the pop-up here and save

How to see your TINT in different device views?

If you want to see how your TINT looks on different devices, you can select Desktop, Tablet and Mobile Preview in the Personalization Builder.  

How to preview and update multiple TINTs with the same personalization?

If you want all your TINTs to have the same look, you no longer need to duplicate your TINTs or spend time on personalizing each individual TINT unless you want them all to have unique looks.  To see how this looks in the TINT editor: 

1. Go to Personalizations List
2. Click on the personalization you want to use
3. Choose a TINT from the list to see a preview of how this personalization looks for that TINT 
4. Click on another TINT to see how this personalization looks on another TINT.
5. Make any changes to the personalization in the lefthand column.  The Publish button will change from black to green if changes have been made.
6. Click publish 
7. 

Why and How to duplicate your Personalizations?

The great thing about duplicating your personalization is, you can use the original personalization as a template and it keeps features like your font upload, color changes … and then you can put it on a different theme.  For example, if you have a brand that uses a red color and you have a brand that uses a green color, all you have to do is create your personalization for the first brand, duplicate and then just change the color for the second brand.  The other features that you have selected stay the same and any features which have to do with the new theme will be set as default.

To duplicate your personalization:

1. Click on … next to the personalization that you would like to duplicate
2. Click Duplicate 
3. This will bring up a popup box to name your new personalization
4. Click on Create
5. Your new personalization will feature in the list and all you have to do is edit the new one to your requirements.

If you have any questions regarding using the Personalize section to customize your TINT please don’t hesitate to let us know at support@tintup.com.