TINTmix

In this article, we will be looking at: 

TINTmix Overview

Social media is just one part of your overall content marketing strategy. TINTmix gives you the power to combine TINT with other digital assets (images, videos, URLs) all in one display. The ability to mix in advertising, sponsorships, and other content makes TINTMix one of the world’s first Dynamic Content Management Solutions (DCMS).

Here are a few examples of TINTmix utilizing several digital assets at once:

Click here to view the full TINTmix live on your own screen.

 

There are three major elements of TINTmix that you’ll want to be familiar with before starting:

1. Layouts - Each Scene you create has a fixed Layout. There are multiple of different layouts you can choose.

Zones_horizontal.png

For percentages on 2 or 3 zones, here's an example:

image (50).png

2. Scenes - A Scene is comprised of individual elements called Content

3. Content - Content are elements that are added to Zones. Content items can be:

  • TINT Board
  • URL
  • Image
  • Video
  • YouTube
  • Vimeo
  • Facebook Live
  • Twitch

TINTMIX_Select_Content.png

 

How to create a TINTmix

To add your TINTmix, go to the TINTmix icon TINTMix_Icon.png on the left-hand side and click "Add a TINTmix" button.

Adding_a_TINTmix_page.png

This will load the following view and will automatically load scene 1 and the layout zone is set at 1.

mceclip16.png

 

How to change the name of a TINTmix

Click on the Untitled mix in the TINTmix or click on the ...  > Rename Mix in the list of the TINTmixes 

Change_name_TINTmix.gif

 

How to change the Layout

To change the Layout for Scene 1, click on Change Layout and then you would be able to choose from the following options. In order to optimize the performance of TINTmix, there is a limit to the number of images, media, and TINTs that can be added to the mix so the maximum zones you can set it to is 3.  When using our API to build a TINTmix, you can choose to have as many zones as you like. If you want to visualize how the zones would look, use the CSS grid template to get a better idea and have a play around.

Layout_and_all_zones.png

How to add content

To add your content, click on "+Add Content" button and this should bring up the following options. Note: You can upload up to 100 images and 20 videos now.  If you are running the TINTMix on older hardware or hardware with limited resources and you run into performance issues, please try and reduce the number of images/videos to improve your experience. 

TINTMIX_Select_Content.png

 

These are all the options that you will see each Content selection:

 

TINT: 

  • Select TINT - Pick which TINT you would like to display
    Select Personalization - Choose which personalization you would like the TINT to have
  • Content Label - type in what you want to label the content
  • Duration (Seconds) - type in how long the content will be displayed for
  • Background Color - type in the hex code to change the background color 
mceclip4.png

URL:

  • Enter website URL - Type or copy the URL you want to use
  • Content Label - type in what you want to label the content
  • Duration (Seconds) - type in how long the content will be displayed for
  • Background Color - type in the hex code to change the background color 
mceclip6.png

Image:

  • Image Preview - This is where you will be able to see the image once it's uploaded
  • Fit - the zone will fit the image, keeping its original aspect ratio.
  • Fill - the image will crop to fill the zone
  • Upload an Image - Click here to upload your image
  • Remove Image - the button to remove the image you have uploaded
  • Content Label - type in what you want to label the content
  • Duration (Seconds) - type in how long the content will be displayed for
  • Background Color - type in the hex code to change the background color 
Add_Image_-_TINTmix__1_.gif

Video:

  • Video Preview - This is where you will be able to see the video once it's uploaded
  • Fit - the zone will fit the video, keeping its original aspect ratio.
  • Fill - the video will crop to fill the zone
  • Upload a Video - Click here to upload your video
  • Remove Video - the button to remove the video you have uploaded
  • Content Label - type in what you want to label the content
  • Duration (Seconds) - type in how long the content will be displayed for
  • Background Color - type in the hex code to change the background color 
Add_Video_-_TINTmix.gif

YouTube:

  • Enter YouTube URL - Type or copy the YouTube URL you want to use
  • Content Label - type in what you want to label the content
  • Duration (Seconds) - type in how long the content will be displayed for
  • Background Color - type in the hex code to change the background color 
mceclip12.png

Vimeo: 

  • Enter Vimeo URL - Type or copy the Vimeo URL you want to use
  • Content Label - type in what you want to label the content
  • Duration (Seconds) - type in how long the content will be displayed for
  • Background Color - type in the hex code to change the background color 
mceclip11.png

Facebook Live:

  • Enter Facebook-Live URL Type or copy the Twitch URL you want to use - Type or copy the Facebook Live URL you want to use
  • Content Label - type in what you want to label the content
  • Duration (Seconds) - type in how long the content will be displayed for
  • Background Color - type in the hex code to change the background color 
mceclip10.png

Twitch:

 

  • Enter Twitch URL - Type or copy the Twitch URL you want to use
  • Content Label - type in what you want to label the content
  • Duration (Seconds) - type in how long the content will be displayed for
  • Background Color - type in the hex code to change the background color 
mceclip9.png

 

To add another scene, you have two ways of doing this.  Click on the "+Add Scene" or you can click on the sign mceclip3.png at the bottom of an already existing scene.

mceclip2.png

 

How to edit the style of a zone

Editing a Content by clicking on the dark grey bar

Deleting an Item by hovering over the dark grey back to reveal the trash icon
mceclip14.png

Changing the Duration without going into the Editing a Content menu by clicking on the down arrow next to the time. 
mceclip15.pngR
earranging the order of the Content Items by simply dragging and dropping in the same zone or even moving it to a different zone.

Drag_and_drop.png

 

How to display a  TINTmix

When you’re ready for your TINTmix to be viewed, you can do this in three different ways

How to display via the TINTmix list

  1. Click on ... next to the TINTMix you want to view
  2. Click on View in New Tab, this should open a new window with your TINT mix
  3. The URL that you see on this new tab is the static URL that you can share with others

How to display from the inside of the TINTmix itself

  1. Click on View TINTmix

How to display via a Chromecast

  1. Click on ... next to the TINTMix you want to view
  2. Click on Cast to Chromecast
  3. A popup will appear with the list of available device
  4. Pick one of the devices and your TINTmix will display on this device

How to cast to ChromeCast - TINTmix - 22nd January 2024.gif

For more information on Chromecast, click here.

Compatible Browsers

TINT relies on modern HTML5 and CSS features to be displayed correctly.  Proprietary web browsers, like those that are built into Smart TVs, likely won’t render a TINTmix well as they are not updated very often unlike your standard web browser.

  • Edge: 84+
  • Firefox: 78+
  • Safari 14+
  • Chrome 72+

If you have any questions or concerns, please don’t hesitate to 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.