You will need a basic understanding of HTML, CSS and how to inspect a webpage before continuing.
1) Retrieve webpage data
You will need to retrieve four pieces of information from your webpage that will be used later when uploading to your account. You will need the webpage URL and the css selectors that will correspond to your datas headers, rows and data items.
For our example we are going to show the Premier League Football Table
Header CSS selector
We want our headers to be the headers shown in the table (Team, Played, Won etc..).
Our css selectors for these are '.gs-o-table__head .gs-o-table__cell--bold'
Row CSS selector
We want this to be the css selector that corresponds to the tables rows, to give us the amount of rows we need and to differentiate our data.
Our css selector for this is '.gel-long-primer tr'
Data items CSS selector
We want this to be the css selector that holds the table data (the team names, games played, games won etc..)
Our css selector for this is '.gs-o-table__cell'
2) Select Dynamic Data plugin
Log in to your embed signage account and select 'Dynamic Data' from the left hand sidebar. If you don't see this option, contact us and we can add the plugin to your account.
3) Add webpage as a source
You will now see your sources page, this will display all of your dynamic data files uploaded to your account. From here you can upload, view, update or delete any source. Click 'Add new data source' at the top right of your account.
4) Fill out information
Source name - Give your source a name for your reference
Source type - Select your sources type ('Webpage')
Auto publish - Select whether your data is auto published to your online device(s) when your data is updated
Seamless updating - Data is updated seamlessly without a channel publish (data using images via custom columns requires a channel publish for the device to download the images)
Webpage Import
Update frequency - Select how frequent you want your data to be updated to your embed account, or you can update it manually
Webpages
Name - Give your feed a name, for your reference (will become the sheets name)
Location type - Select whether the location of your data is a URL or FTP (if FTP selected, you will then need to configure this otherwise just enter in the URL)
Headers css selector - Enter in your headers css selector from step 1
Item css selector - Enter in your rows css selector from step 1
Column css selector - Enter in your data css selector from step 1
Include item attributes as columns? - Select whether you want each item attribute to be a column in your dynamic data
5) Configure your data
Once you have filled out the relevant information, click 'Add Source'. You will then see an overview of your source with all the data it has pulled in using the css selectors, including the headers. There are a few options you need to configure next:
'Use as header row' - Set this option to the row containing your column headers.
'Use as item title' - Used for configuration settings and helps identify a row.
'Use as item ID' - Only relevant if you are using device specific items or adding custom columns. This uses the chosen column to match the row of data with the existing row, device and custom columns.
Click here to find our more about device specific data or custom columns.
Once you have configured your sheets, click 'Add Source' to import your data. You will be taken back to your sources page where you will see the source you have just uploaded. From here you can view/update (eye icon) or delete (trash can icon) your source.
