Embed data on the web using the Data & Insights Social Data Player™ (SDP)

• Who can edit
• Where to edit
• The Dashboard 
• Creating & Customizing a new template
• Embedding a table in an external webpage with Social Data Player

The Data & Insights Social Data Player™ (SDP) is a feature of the platform that allows audiences to republish data on the web as an Embed. When hosted on webpages these embeds serve as extensions of the portal - users can interact with the data, the content updates dynamically when the underlying data is updated and they link back to the original instance on the portal.

The SDPs can be customized via templates that can match the branding and styling of the data portal. This article will cover which site roles can edit the SDP and the different options for customizing them.

Who can edit

Site Roles that can create and edit the SDP Templates: Administrators, Designers

Where to edit

The edit dashboard can be accessed through Administration > Embed (Social Data Player) Templates

The Dashboard 

The dashboard will contain a template with the standard Data & Insights branding. To the right, you will see four buttons:

Make Default - If you were to create more than one template you can make a certain template the default when an embed is created. The other templates will be presented as options. You cannot delete a template that has been made the default. 

Delete - You can delete all templates except a template that has been made the default. Deletions are permanent. 

Edit - You can customize the default template and any others you create. 

Create a new template - This option will allow you create a template from scratch. 

Let’s walk through creating a template... 

Creating & Customizing a new template

1.  Click on the ‘Create a new template button’. You will see a pop-up which will prompt you to name your template. This step is mandatory.

2.  You are taken to an editing tool which will show you what your new template currently looks like. It will by default have Data & Insights branding. 

You will see four sidebar options to the upper right of this editing tool. Changes made to the options within these four panels will update the template immediately so you can preview it and tweak it before making a finalized template option. With each change you will be prompted to save - you don't have to, but in case you do make that selection you will have to undo changes manually.

3. In the Metadata panel, you can edit the name of the Template, and you can also opt to give the template a description. This description will only be seen while editing.

4. The Appearance panel is where the bulk of the changes you can make to the template can be found:

• Exterior
  • Width (Required)
  • Height (Required)
  • Powered by text (include or not)
• Logo
  • Choose a logo from a menu of uploaded logos, or no logo
  • Upload new logo option
  • The optimal size for a SDP logo is 300px length by 35px height
• Color and Style
  • Frame Color
  • Border Color
  • Button Color
  • Toolbar Color
  • Find Field Color
  • Border Width
• Column headers
  • Wrap Column Titles
  • Bold Titles
  • Font Size
• Rows
  • Row numbers (include or not)
  • Font Size
  • Stripe Rows (stripe or unstripe)
  • Stripe Color

5. The Behavior panel allows you to configure how users can interact with the embed.

You can choose whether the default options under the menu show or not. The default options are:

Menu

• More Views - more views created off of the underlying dataset
• Discuss - allows one to comment on the embed or view comments, if this feature is enabled
• Download - download the data is the view is tabular or geospatial in nature

• Embed - create a clone of this embed which will have the exact same capabilities as the original

• API - find the API endpoint to consume the data programmatically

• OData - See support article for more details

• Print - print the contents of the embed

If you unselect all of the menu options the menu button will not appear. 

Search - allows you to search within the embed

Info - provides metadata about the underlying view

Share Menu - allows you to share the embed

Full Screen - takes you to original view on the data portal

Warn When Leaving - shows an alert notifying users that they are being redirected to another site when clicking external links.

Embedding a table in an external webpage with Social Data Player

Once you have your Social Data Player templates created, you are ready to create custom embed code for an asset, so you can place that code into the HTML of an external webpage.

1) Go to the Primer page of a dataset that you want to embed. Then go to the page view by appending "/data" to the end of the URL.  Example: https://evergreen.data.socrata.com/dataset/Washington-State-Median-Income-by-County/yiqu-vird/data

2) Find the Embed code by selecting the Embed menu item, and going to the Social Data Player code section.

Choose the size of the embed you would like and then select the Social Data Player template you want to use. Then select "Done", and copy the HTML iframe code in the box.


3) Place the HTML iframe code into the code of your destination page. To get an idea of you it will look, you can test it out in this tool: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic.

And that’s the Data & Insights Social Data Player! If you have any questions or suggestions on how we can make our documentation better please send an email to datainsights-support@tylertech.com.