Widgets
Creating beautiful widgets for our customers is great, but being able to manage them well is even better!
Widgets are created In the CMS. When doing so, pay special attention to the following.
Group Related Fields
For a good user experience, it is important that the user can enter the data of a widget in a clear manner. For example, creating a dedicated group for all button-related fields can significantly improve the interface. This approach not only makes the form more organized but also helps users quickly find and fill in the required information.
Code Example (click to expand)
{
"type": "object",
"properties": {
"button": {
"title": "Button",
"type": "object",
"properties": {
"btn_txt": {
"title": "Button text",
"type": "string",
"format": "text"
},
"btn_link": {
"title": "Button URL",
"type": "csstring",
"format": "object"
},
"btn_type": {
"title": "Button type",
"type": "string",
"enum": [
"primary",
"secondary",
"default"
],
"options": {
"enum_titles": [
"Primary",
"Secondary",
"Default"
]
},
"default": "primary"
},
"btn_size": {
"title": "Button size",
"type": "string",
"enum": [
"default",
"small"
],
"options": {
"enum_titles": [
"Default",
"Small"
]
},
"default": "default"
},
"target": {
"title": "Open link in new tab",
"type": "checkbox"
}
}
}
}
}
Descriptions and Placeholders
In addition to grouping related fields, the descriptions and placeholders of fields are also a must-have for the user experience.
When to Use a Placeholder
We use a placeholder to help the user fill in the field. We often expect a certain input that the user must comply with. Think of the classes of a Font Awesome icon that we want. The placeholder can then be fas fa-globe. This is an example of the input we expect.
When to Use a Description
We use this when we want to provide more explanation for a field that we cannot capture with a placeholder. For example, when it has to meet certain conditions or when we want to explain where the user can find which values are possible for a Font Awesome icon.
Code Example (click to expand)
{
"type": "object",
"properties": {
"btn_icon": {
"title": "Button icon",
"description": "Add here Font Awesome icons, www.fontawesome.com version 5",
"type": "string",
"format": "text",
"options": {
"inputAttributes": {
"placeholder": "fas fa-globe"
}
}
}
}
}
Conditional Fields (Dependencies)
We want to make the widgets as flexible as possible for the user. For instance, when it comes to a widget featuring an image on the left and text on the right, we also provide the option to display it in reverse. Alternatively, we might offer a hotspot instead of a traditional image. We often implement these variations by offering customers choices through selects or checkboxes. Depending on the selected variant, certain fields may become irrelevant. Therefore, it's crucial to hide these fields to prevent user confusion and unnecessary time spent filling out the widget.
Code Example (click to expand)
{
"title": "An object",
"type": "object",
"properties": {
"fieldOne": {
"title": "I should be changed to 'foo'",
"type": "string",
"enum": ["foo","bar"],
"default": "bar"
},
"depender1": {
"title": "I depend on fieldOne to be 'foo'",
"type": "string",
"enum": ["lorem","ipsum"],
"options": {
"dependencies": {
"fieldOne": "foo"
}
}
},
"depender2": {
"title": "I depend on fieldOne to be 'bar'",
"type": "string",
"enum": ["dolor", "sit"],
"options": {
"dependencies": {
"fieldOne": "bar"
}
}
}
}
}
Default Fields
There are a number of groups of fields that we will use more often. This concerns images, links, and buttons. By default, we ask you to fill in the same fields here. Below are the examples.
Images
- File
- Alt text
- Link (optional)
- Target of link (new tab or same tab)
Code Example (click to expand)
{
"type": "object",
"properties": {
"image": {
"title": "Image",
"type": "object",
"properties": {
"image": {
"type": "csstring",
"format": "filemanager"
},
"alt": {
"title": "Alt text",
"type": "string",
"format": "text"
}
"link": {
"title": "Link to",
"type": "csstring",
"format": "object"
},
"target": {
"title": "Open link in new tab",
"type": "checkbox"
}
}
}
}
}
If the image is part of a widget where it’s possible to place an image on the left or right side, this option should be added in the JSON.
Links
- URL / Link to
- Target (new tab or same tab)
- Rel
- Default
- nofollow
- ugc
- sponsored
- Text
- Icon (hidden when empty)
- Icon position (left / right)
Code Example (click to expand)
{
"type": "object",
"properties": {
"link": {
"title": "Link",
"type": "object",
"properties": {
"link": {
"title": "Link to",
"type": "csstring",
"format": "object"
},
"target": {
"title": "Open link in new tab",
"type": "checkbox"
},
"rel": {
"title": "Rel",
"type": "string",
"enum": [
"default",
"nofollow",
"ugc",
"sponsored"
],
"options": {
"enum_titles": [
"Default",
"nofollow",
"ugc",
"sponsored"
]
},
"default": "default"
},
"text": {
"title": "Link text",
"type": "string",
"format": "text"
},
"icon": {
"title": "Icon",
"description": "Add here Font Awesome icons, www.fontawesome.com/icons",
"type": "string",
"format": "text",
"options": {
"inputAttributes": {
"placeholder": "fas fa-globe"
},
"infoText": "When left empty no icon will be shown."
}
},
"icon_position": {
"title": "Icon position",
"type": "string",
"enum": [
"left",
"right"
],
"options": {
"enum_titles": [
"Left",
"Right"
]
},
"default": "left"
}
}
}
}
}
Buttons
- URL / Link to
- Target (new tab or same tab)
- Rel
- Default
- nofollow
- ugc
- sponsored
- Button type
- Primary
- Secondary
- Default
- Link
- Button size
- Default
- Small
- Text
- Icon (hidden when empty)
- Icon position (left / right)
Code Example (click to expand)
{
"type": "object",
"properties": {
"button": {
"title": "Button",
"type": "object",
"properties": {
"link": {
"title": "Link to",
"type": "csstring",
"format": "object"
},
"target": {
"title": "Open link in new tab",
"type": "checkbox"
},
"rel": {
"title": "Rel",
"type": "string",
"enum": [
"default",
"nofollow",
"ugc",
"sponsored"
],
"options": {
"enum_titles": [
"Default",
"nofollow",
"ugc",
"sponsored"
]
},
"default": "default"
},
"btn_type": {
"title": "Button type",
"type": "string",
"enum": [
"primary",
"secondary",
"default"
],
"options": {
"enum_titles": [
"Primary",
"Secondary",
"Default"
]
},
"default": "primary"
},
"btn_size": {
"title": "Button size",
"type": "string",
"enum": [
"default",
"small"
],
"options": {
"enum_titles": [
"Default",
"Small"
]
},
"default": "default"
},
"text": {
"title": "Button text",
"type": "string",
"format": "text"
},
"icon": {
"title": "Icon",
"description": "Add here Font Awesome icons, www.fontawesome.com/icons",
"type": "string",
"format": "text",
"options": {
"inputAttributes": {
"placeholder": "fas fa-globe"
},
"infoText": "When left empty no icon will be shown."
}
},
"icon_position": {
"title": "Icon position",
"type": "string",
"enum": [
"left",
"right"
],
"options": {
"enum_titles": [
"Left",
"Right"
]
},
"default": "left"
}
}
}
}
}