Add a real-time feed of the creatives playing on your screens with the Live Creatives Player Widget that you can embed into your website.
The following is a step by step guide, using the billboard operator "Gusaas Signs" as our example
Create a new Private App
Under your personal profile, with developer mode on, click on Apps and then click New Application. (Learn more about creating new apps here)
Name your application something like "{My Company Name} Website Widgets" and select "Private" for your application class
Once you have added your app, you can adjust settings on the main page as needed.
Widget Capabilities
In order for this app to be used for Website Embeds, you will need to add the Widgets capability to your app
Click on the CAPABILITIES tab, and select the switch for Widgets to add this capability
Operator Permissions
This widget is designed for Media Owner websites. On the Permissions tab of your app, select the following permissions
view
viewAnalytics
Public Token
Website widgets use a Public token to fetch their content. On the TOKENS tab, click NEW TOKEN, and select Public token
Learn more about Lucit Application Tokens here
Write down your Public Token - We will need it later
Add your App to your Operator Account
Now that you have created your app, you will need to add it to your operator account in order for it to have access to pull real times stats and creatives for your digital screens
Switch to your Operator Account using the Profile Switcher
Click on Settings and then scroll to Apps & Data Sources and click Add New
Find your app in the list and click on it to add it
When complete, your Widget App should appear in your list of apps
Now that we have created the app,. and authorized it, we can get the Widget Code to embed into your website.
Widget Embed Code
Use the following embed code, b e sure to replace `{PUBLIC_TOKEN}` with your actual Public Token that you created above.
Copy and paste this code directly into your website and you should start to see creatives appearing right away.
View this widget live here
Custom Settings
You can customize the following settings of this component
board_identifiers
Use the board_identifiers parameter to specify an array of digital board ID's based on your vendor supplied board_identifier
board_identifiers : ["ND0002.1","ND0003.1","ND0099.2"]The following are style properties that allow you to control the styles of the widget.
These use json, React style parameters (so, for instance. the css property max-width : "100%"'; would be written as "maxWidth:"100%",
The default styles for these are as follows :
container_style
The container style is the box around the image
image_style
Image style is applied to the image itself
info_style
This style is applied to the information window that appears below the image