To learn more, check out Building Custom Widgets on Duda University.
Duda’s Widget Builder allows you to build your own custom widgets and make them available to your customers within the website editor. You can design beautiful widgets that look and act exactly like all other widgets within the Duda platform. The Widget Builder supports standard Duda input options for both the content and design of widgets, to help maintain consistency of UI and experience for customers building websites. This means you can accept a text input as content or a background image as a design of the element.
Custom widgets do not support the multi-lanugage site feature.
When developing a widget, it is your responsibility to support the code that gets output on the website. All of the code you write will be exactly output on the website. We recommend that you use standard browser APIs and features that are commonly supported across the majority of browsers.
The Content and Design editors allow you to define the input options of each widget. This allows you to use standard inputs, such as text, images, links, lists, and more.
Publishing a widget takes the current code, options, etc., and makes it available to your users. Until a widget is published, it is only visible to account owners or staff members that have the Widget Builder permission. Code that you’re currently working on is considered in draft and can only be viewed in the preview.
The first time you publish a widget, it will be published as version 1. Each time you republish, the version is incremented to another version. When republishing you are prompted to
auto update all existing instances of that widget on live sites. This feature is off by default. Auto update can be useful, but it is highly recommended to test any widget updates before pushing to all sites.
If auto update is not selected, all changes you make to widgets (such as adding CSS, JS, etc.) will not alter widgets that are added to websites. If a user has already added a widget under an old version, they will continue to be able to use that widget version, but will also be presented with an upgrade message asking them to upgrade.
Once published, custom widgets will be accessible within the widget menu of the website editor. This can provide a better user experience by allowing users to easily drag-and-drop these widgets on their site and easily configuring them through the content and design menus.
Building a custom widget is recommended for:
- Building reusable elements
- Elements that will require user input for customization
- Accessing and inheriting Duda's global styles
- Using connected data
An HTML widget can be used for one-time code integrations on a website. This solution is a great option for adding 3rd party scripts or code that doesn't require customization and can easily be placed within the widget's input.
Updated 10 months ago