New Editorial Modules

What Can You Build with Editorial Modules?

You can create a wide range of reusable content blocks, such as:

1. Product Reviews
   
   
   
   
2. Any custom Call To Action
   
   
   
   
3. Promoting Events
   
   
   
   
4. Expert Quotes
   
   



5. Pulling content from custom 3rd party integrations
   
   

How to create an Editorial Module

Go to the Editorial Modules Dashboard (formerly called Shortcodes) and click on the +Add New button at the top right corner.

Fill in the Name, Description and Variables that will be used in the Module.

• Name : Define the name of the Module (without special characters or spaces, you can use a basic text separated by underscore)
• Description : Provide a short explanation.
• + Add Variables: This section allows you to define the fields that will be part of the Module, which writers and editors will have to fill in Entry Editor. Each variable includes:
  • Title – The label of the field in the Entry Editor’s form.
  • Name – The internal identifier used to reference this field in the HTML of the editorial module.
  • Type – The type of field used in the editorial module’s form. More on the supported types bellow.

Add your CSS, HTML, JS to create your module in the Embed Code section and reference the variables inside it.

Save your changes.

Just let your editorial team know that they can use it in Entry Editor.

Variable Types

Next you can see the different field types available for writers/editors to fill:

The following list shows the standard types that can be used. Reference each one of these within the Embed Code section as {{variable_name}}:

• Text: This is just a text input with plain text.
• Date (timestamp): Date picker input that returns an integer with the timestamp of the selected date.
• Datetime (timestamp): Date Time picker input that returns an integer with the timestamp of the selected date and time.
• Checkbox: Returns a boolean (true or false).
• Location: Allows the writer/editor to enter a Location stored as text in the value of the variable.
• Phone: Allows writer/editor to enter a formatted phone number stored as text in the value of the variable.
• PDF: Allows the editor to upload a PDF file, and the URL to the file will be stored as the value of the variable.

Rich Text Variable

• RichText: Adds a form input with rich text enabled. It will return proper HTML inside the variable. When referencing this type of variable, wrap it in triple curly brackets (e.g., {{{my_rich_text_var}}}) instead of using double curly brackets, to ensure proper rendering.

Image Variable

• Image: Allows the writer/editor to upload an image. The image URL will be stored in the value of the variable. This type also allows to choose a specific crop for the selected image, which the editor will have to apply.

Dropdown Variable

• Dropdown: You can create a list of selectable items by clicking on the +ADD ITEM button or dynamically retrieve them from an API endpoint using the Prompt URL field. In the latter case, the response must be a list of Key-value pairs using the following format:

[
 {
 title: "label of the option",
 value: "value rendered in the variable once the option is selected"
 },
 ...
]

Radio Box variable

• Radio Box: Same as Dropdown type, but uses radio boxes instead of a dropdown as the form field.

Searchable Variable

• Searchable: This type allows adding an autocomplete input field that will fetch the items from an external API endpoint set in the Prompt URL. That endpoint needs to receive the following query parameters:
  • q: this is the string that the user typed in the autocomplete input field.
  • limit: this is an int indicating how long the list of returned items can be.
  • offset: this is an int that indicates from which offset to start the list of returned items.

The endpoint should return data in a specific JSON format using the following properties:

• id: string representing the ID of the rendered item.
• thumb: string with the URL of the item’s thumb image, if there is one, that will be rendered in the results of the search.
• title: string with the text of the item’s headline, if there is one, that will be rendered in the results of the search.
• Subtitle: string with the text of the item’s subheadline, if there is one, that will be rendered in the results of the search.
• Extra fields could be added as key-value field

{  
"result": [
{
"id": "123",      
"thumb": "https://...",      
"title": "Main title",      
"subtitle": "Optional subtitle",      
"key_1": "value_1",      
....      
"key_n": "value_n"    
},   
...  
]
}

Then within Embed Code the searchable’s var keys can be used in the following format {{variable_name_key_1}}. This is a combination of the variable name defined in the dashboard and the key name.Example: Let's say the variable name is “country” and the field value is “code” in the variable, then you can use {{country_code}}.

How to Add Modules to Entry Editor?

Modules can be added to the Entry Editor only after they’ve been created in the Editorial Modules Dashboard. If you want to add new modules, you’ll need to discuss it with your developers. Once the modules are set up by the development team in the Editorial Modules Dashboard, you can follow the steps below to easily add and customize them within the Entry Editor.

Click on Add Media bar and select the option "[ ]"

Select the Editorial Module you want to add.

Click on the pencil button to edit

Fill in the form with the fields defined by the developer for this module and save your changes.

See how it looks!