This section assumes that you have installed the Personalisation Hub AEM Package & successfully connected AEM Screens to the Personalisation Hub Platform. 

With Text Overlay text can be positioned over an image or video. Text Overlay also features the ability to localise messaging to an individual display by taking advantage of ContextHub Variables. In this user guide we will create a campaign which informs visitors to a store about reopening after Covid restrictions. The following text will be placed in an image component as a Text Overlay with key information (marked by curly brackets '{}') to be made variables which will be pulled from ContextHub data so that they match the location of the display.

Contactless support still available on {StorePhone}

Your {StoreName} store concierge is ready to help.

We're so happy to see you in person once again.

If you would prefer, we still have our contactless support options available and will do everything we can to assist you over the phone.

Your {BrandName} Team

1. Navigate to your Screens Project and highlight Channels.

2. Click on a channel which has been connected to ContextHub. Alternatively, create a channel and connect it to ContextHub. This is covered in Create a Channel.

3. Select this channel and Click on Edit. 

4. Use the Side Panel toggle to Expand the Left Menu Pane to access image assets. Add an image. For the purpose of this guide a plane image of a purple background is used. However, any image will suffice.

5. Click on the Image component you just added and then click on the Wrench icon. From the Image config dialog click on ContextHub.

6. Click on Add and the ContextHub Data Binding panel opens. Fill in the fields as below. For Placeholder enter StoreName. This will be replaced by data pulled from ContextHub Variable location-store/name. So for instance, {StoreName} will be replaced by Sydney if the store is located in Sydney.

7. Pressing Add once more will give you another Data Binding panel. This time fill in the fields to inject the {StorePhone} placeholder with the data gathered from the location-store/localised_copy ContactHub Variable. As a Default Value for phone number just in case the variable is empty enter a catch all number or a head office number. For the purposes of this guide we have supplied a dummy @YourBrand HQ phone number 111 222 333 444.

8. Now click on the Text Overlay tab. Copy paste the Message at the head of this guide. See above. It should keep all formatting and present like the screenshot below. If not place the cursor in each paragraph and use the formatting menu to shape the message presentation.

9. For additional formatting you can use the Sizing & Positioning section. Use Horizontal and Vertical alignment along with size to place the text relative to the image. The image is set to fill the dimensions of the display. So through trial and error you can gauge the amount of adjustment. For further refinement the Use fine-grained controls toggle allows you to apply CSS to be even more precise. Once these parameters are adjusted tick Done (tick icon). Publish the channel and view the results on a display which has the channel containing the Text Overlay campaign active.

The example below shows the Localised Text Overlay as authored in AEM with {StorePhone} and {StoreName} placeholders ready to receive data from ContextHub on the left and the image on the right as it appears in-store at 1920x1080 pixels on a display of the same size with text positioned 140px (x) from the left and 300px (y) from the top with an overall width of 820px.

.