Overview

This article will go through how to use Lists and the Overlay module to create and manage content for signage screens, such as menu boards, within your WovenManager platform.

We’ve incorporated videos and step-by-step guides to go over the process.

Create a List

The first step to creating a menu board screen is to create a list containing the items that will be displayed.

1. Visit the “Admin” section, and click the “Lists” tab.
2. Click on the "Plus” button at the bottom left and give a name to your list.
3. On the right side of the screen, add the fields you want to include in your list. For instance, item name, description, and price. For the price field, select the number type from the dropdown.
4. Click on “Manage items” on the left side to add all the items you want to include in your list. Then, click Save.

Your list will be available to add to the screen in the overlay module.
Creating a List to use with the Overlay Tool

Create an Overlay

To create an overlay, first upload a video or image that will serve as the background for the screen.

1. Hover over the desired background thumbnail (video or image), and click on the “More” menu. Then, select “Create”.
2. The overlay screen editor will open. Make sure you save the changes.

Note: If the background thumbnail already has an overlay created, you can “Edit” or “Delete” the overlay from the same “More” menu. 

Creating Content Using the Overlay Tool

Adding Text & Images to an Overlay

• To add text to your overlay design, click on the “+ Add” button in the upper left corner of the screen and click “Zone”. Then, use the bounding box to move and resize the text zone. You can change the font type, size, color, and add shadows.
• For images, click the “+ Add” button in the upper left corner of the screen and click “Image”. You can either select “Browse” or “Choose from Library”.
• To add multiple images from the library, press the Control or Command button on your keyboard and click the images you want in the design.
  

Adding Tables to an Overlay

To add a table, follow these steps:

1. Click on the “+ Add” button in the upper left corner of the screen and select “Table”.

2. Choose the type of Data source for the table.

   • Manual: Manually input the data for the table. This is helpful for small tables or information you want to keep organized and aligned.
   • List: Select one of the previously created Lists to display on your design. This ensures that changes made to the list will be automatically synced across your displays without needing to manually edit them again.
   • API: Retrieve data from a third-party source. This is useful if you want to connect a POS system with your overlay design.

3. Select the number of rows, columns, and paging duration. then click “Set”.

   Note: Paging duration refers to how often (in seconds) the items displayed will rotate. For example, if the menu list contains 10 items and you set a 10-second paging duration for a 5-row table, the table will display the next 5 items after 10 seconds.
   

4. Select the table and use the bounding box to resize and position it if needed.
5. To set the fields displayed on the table, select each column, and then click on “Select Field” on the left side of the screen. Then select the field from your list, such as, Product Name, Description, Price, etc. For a Price column, you can adjust the format to one from the Format menu (dropdown).
6. Use the tools on the left side to change the font, size, and color to match your layout. You can also add borders to the entire table or to each item to make sure they are easy to read.
7. To modify a column, select it and right-click to remove it, insert a new one, or add a field within the same column.

Add Animations in the Overlay Module

To add an animation to an element in your overlay design, follow these steps:

1. Select the desired element to animate.
2. (Optional) If you want to add both entry and exit animation, set the duration (e.g. 10 seconds) at the left side of the screen.
3. Choose an entry animation from the dropdown list.
4. (Optional): Choose an exit animation from the dropdown list.
5. Preview the overlay design and Save the changes.

Share the Overlay Design

To share your overlay design with others, even if they don’t have a WovenManager account, you can create a Share URL by following these steps:

1. In the content tab, hover over the thumbnail of the background image or video you want to share.
2. Click "Edit" or double-click the image or video.
3. A new screen will appear with a "Share" button at the bottom left corner.
4. Click the "Share" button and copy the share URL to send it to others, even if they don’t have a WovenManager account.
5. You can also set an expiration date and add notes for each linked URL.
   

Duplicate the Overlay Design

If you want to use a video and overlay design again, you can duplicate it. Follow these steps:

1. Click on the "More" menu.
2. Click "Duplicate".
3. Choose "Include Overlay" to duplicate the asset and overlay you created, or choose "Skip Overlay" to duplicate the video or image only (background), without having to re-upload it.