TINTmix

In this article, we will be looking at: 

• TINTmix Overview
• How to create a TINTmix
• How to change the name of a TINTmix
• How to delete a TINTmix
• How to bulk delete TINTmixes
• How to change the Layout
• How to add content
• How to edit the style of a zone
• How to display a TINTmix
  • How to display via the TINTmix list
  • How to display from the inside of the TINTmix itself
  • How to display via a Chromecast
  • Compatible Browsers
• How to put a TINTmix in full-screen mode
  • For Mac
  • For Windows (PC)

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.

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

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

 

How to create a TINTmix

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

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

 

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 

How to delete a TINTmix

1. Click on ... next to the TINTmix you want to delete
2. Click on Delete
3. A pop-up box will appear saying: Are you sure? This action will permanently delete your TINTmix. Are you sure you still want to continue?
   
4. Click Ok to delete or cancel to keep the TINTmix
5. The TINTmix will be deleted and disappear from the list

How to bulk delete TINTmixes

1. Select the TINTmixes you would like to delete by using the tickboxes
2. A small pop-up will appear at the bottom of the list
3. Click Delete
4. A pop-up box will appear saying: Are you sure? This action will permanently delete your TINTmix. Are you sure you still want to continue?
   
5. Click Ok to delete or cancel to keep the TINTmix
6. These will automatically deleted and disappear from your list

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.

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. 

 

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

 

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

 

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

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

 

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

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+

How to put a TINTmix in full-screen mode

To put a window in full-screen mode on Macs and PCs, you can follow these steps depending on the browser you're using.

For Mac:

Google Chrome, Safari, and Firefox:

• Press Control + Command + F to toggle full-screen mode.
• Or click the green circle in the upper-left corner of the window.

For Windows (PC):

Google Chrome, Firefox, Edge:

• Press F11 to toggle full-screen mode.
• Alternatively, click the three dots or lines in the upper-right corner of the browser, and choose "Full screen" or look for a full-screen icon.

These shortcuts will expand your window to full screen, hiding the toolbar and other elements to maximize the viewing space. To exit full-screen, use the same key combination again or hover your mouse at the top of the screen to reveal the toolbar and click the full-screen icon.

If you have any questions or concerns, please don’t hesitate to contact Technical Support at support@tintup.com.