Designing widgets - Widget Designer Guide

If you are unfamiliar with Widgets, please read this.

Widget Types:

Widgets refer to any of the features the Magnet Audience Engagement Solution includes. Widgets are of several types:

1. Summary
2. Related Articles
3. Entities
4. Related Articles Page
5. Entity Related Articles Page
6. In-text Entity Links
7. Follow Story
8. Follow Entity
9. Meta Tags and Description
10. Recommended for you

Each widgets’ design can be created using our user-friendly Online Widget Designer. This designer allows changing the layout, the CSS styles, and the logic settings of each widget.

Please ask your account manager to provide you access to its interface and guide your team to design each widget. 

Widget Designer:

 To access the Widget Designer:

1) Visit the Magnet Publishers' Dashboard by clicking here.

2) Login to the dashboard

3) Using the left menu, navigate to the Widgets section.

4) Scroll down to the "Created Widgets" section and click on the dropdown menu illustrated below:

5) Choose the Widget type you want to create then click on the "Create New Widget" button.

6) You should now be in the Widget Designer interface similar to the one below.

The Widget Designer is split into three main section:

a) Widget Description and CSS: this section allows you to change the widget "name" or description that will appear in the widgets list. While the Edit CSS button allows you to add or edit very specific CSS elements that are not readily available in the designer section. An example of such a specific CSS requirement is adding a specific font-family that is not listed in the designer interface.

b) Widget Designer: this is the main section whereby you can edit all the design/branding and widget settings. This section includes different options depending on the type of widget selected.

For more information on setting-up each type of widget, please refer to the specific post related to designing it.

c) Preview Settings section: this section allows you to preview in real-time how the widget look-and-feel is shaping based on the selected options in the widget designer section. This area allows you to change the Screen size of the displayed Preview, the background color, Language, and even the Type of content.