Although it does require programming knowledge, HTML offers a whole new way to present your templates.
The Mvix HTML5 content app allows you to display formatted HTML code or static text on your digital signage device. For example, the below template was created with HTML graphics to show a looping video, animated logo, & moving text.
A well put together HTML5 template can appear very professional and is recommended for clients who are using multiple zones and want to impress and inform their audience with an impressive presentation.
What You’ll Need:
- A compatible digital signage player e.g. Mvix, BrightSign, etc.
- CMS Software with a supported feature package
- Internet Connectivity
Video Tutorial
To better help clients who would like to see this app presented live, we have prepared the following video tutorial.
If you would prefer to read at your own pace, there is a text version available below the video.
Access The App
- From the Mvix CMS Dashboard, (1) Hover over the “Media” tab and (2) click “Add Media”.
- Once the “Add Media” module appears, (3) ensure you are on the “General” tab then (4) select “HTML5 Scripts”.
Quick Start
- After selecting the HTML5 Scripts app, (5) “Quick Start” should be auto-selected. This category is for (6) pre-loaded apps based on the 5 separate categories.
- From here (7) select from an available theme and the (8) HTML, CSS, & JavaScript code will auto-enter below.
- You can also adjust the (9) Advanced Settings if you’d like to change the animations, speed, styles, and other categories.
- Once complete, be sure to (10) preview to confirm everything looks great, (11) change the name/title, (12) and then save.
HTML-CSS
- Code is the section you will use for the majority of your HTML/Rich Text needs, as it is where you can directly input your code. This section is intended for advanced users, web developers, or for use with third-party code.
- Once you select code, you’ll be (13) given 3 options; HTML-CSS, Rich Text, & Plain Text. Each option has a different style so use the one that best fits your coding needs.
- For HTML-CSS, you’ll need to (14) click the corresponding box for HTML, CSS, & JavaScript, and (15) input the relevant code into the field.
- IMPORTANT: Due to security issues, links, URLs, and asset or dependency paths can be included only in the HTML section. No URLs are allowed in CSS or JS sections. This includes dependency paths to fonts, styles, images, etc.
Rich Text
- The Rich Text option works like a standard document editor. One example is Microsoft Word, where you can edit the alignment, font, and color of the text.
Plain Text
- Choose the Plain Text option to paste HTML code into or the Rich Text option to type in content to show as static text.
Package
- Use the Package drop zone to upload pre-configured files utilizing HTML. You can see a sample file by (16) click on the ZIP section in the top-right.
- Simply drop, browse from the available options, or import your files onto the add-file zone. Then you will need to upload the file.
- IMPORTANT: Due to security issues, links, URLs, and asset or dependency paths can be included only in the HTML section. No URLs are allowed in CSS or JS sections. This includes dependency paths to fonts, styles, images, etc.
- If you are using the Package upload method, please be sure to name your HTML file “index” and keep it in the root folder of your zipped package. This is so the system can recognize it and find other required media and correctly display it.
Problems, Questions, Corrections: If you have any further questions, problems, or corrections you would like to see made, please open a support ticket.
