Info: This feature requires Content Station 11.6 or higher.
An Interactive component is one of the types of components that can be used for creating a Story using the Digital editor.
It displays content that is hosted on the Internet somewhere, such as a Google Map, a video, a poll, a quiz, and so on.
Displaying content from the Internet can also be done with other types of components (such as the Social Media and Embed components), but the content of those components is static while Interactive components can be customized by the user.
Example: A basic Google Map can be offered as a component which the user can further modify from within the Digital editor by adding locations to the map.
Interactive components need to be defined and made available in Content Station. This article explains how to do this.
For information about how to work with an Interactive component once it is added to an article, see The components of a Digital article.
Note: The process of creating an Interactive component has changed since Content Station 11.18.
An Interactive component is configured as part of a Component Set. For detailed instruction about setting up an Interactive component, see the documentation on Git.
How it works
As mentioned, the content of the component is initially loaded from a location somewhere on the Internet. This content is then later customized by the user.
To keep track of this, two fields are used:
- View URL. This field holds the URL to the HTML content that is loaded when the component is added to the article and when the article is published.
- Edit URL. This field holds the URL to the HTML content in which the user can change the data of the component.
Note: Both URLs have to be located on a publicly accessible Web server, preferably on HTTPS.
When the data is changed by the user, the changes are stored in the article. When the article is closed and opened, the stored changes for each component are loaded.
Creating an Interactive component
Creating an Interactive component is done in the Management Console of Content Station in Enterprise Server by defining a set of properties.
This can be done in the following ways:
- Manually by creating a new Interactive component and filling out each property one-by-one.
- Automatically by importing a file containing pre-defined properties. This way, multiple components can quickly be generated in one single action.
Step 1. In Enterprise Server, access the Management Console for Content Station.
Click Integrations > Content Station
Step 2. In the list of Brands, choose Global to make the component available to all Brands, or choose a Brand to only make it available to that Brand.
Step 3. In the menu, choose Interactive components.
The Interactive Components page appears showing all Brands. When selecting a Brand, all Interactive components for that Brand appear.
Step 4. Do one of the following:
- To add a component manually, click Add new.
- To add one or more components automatically, click Import.
See the instructions below.
Adding components manually
Adding a component manually involves filling out a list of properties.
For an example and a detailed description of the properties, see the WoodWing GitHub page.
Adding components automatically
Multiple components can be added automatically by importing a JSON file that has the properties for each component defined.
See the following example of the structure of such a file:
{
"version": "1",
"data": [
{
"name": "Component 1",
"icon": "add URL here",
"viewLink": "add URL here",
"editLink": "add URL here",
"description": "add description here",
"defaultConfig": "add JSON here",
"enabled": true
},
{
"name": "Component 2",
"icon": "add URL here",
"viewLink": "add URL here",
"editLink": "add URL here",
"description": "add description here",
"defaultConfig": "add JSON here",
"enabled": false
}
]
}
Use the Import button to import the file and generate the components. Similarly, use the Export button at the bottom of the page to export selected components to a JSON file.
Deleting an Interactive component
Before deleting an Interactive component, make sure that it is not used in an article anymore.
Instead of deleting the component from Enterprise, it might be safer to disable the property 'Show in Digital editor' for that component.
Document history
- 8 August 2018: Split the article into steps for Content Station 11.18 and higher, and Content Station 11.18 and lower.
Comments
Do you have corrections or additional information about this article? Leave a comment!
Do you have a question about what is described in this article? Please contact support here.
0 comments
Please sign in to leave a comment.