Duda’s Widget Builder allows you to build your own custom widgets and make them available to your customers. You can design beautiful widgets which look and act exactly like all other widgets within the Duda platform. We allow you to use 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.

Whether you are looking to integrate an additional service (ex. scheduling, chat) into your customers' websites or provide a new UI element (ex. testimonials, table) a custom widget is where to get started.

📘

If you're looking for someone to build a widget for you, check out our fulfillment channel.

Code

A custom widget is composed of any of combination of HTML, CSS and JavaScript. View the guides for each technology to learn more about how to use each language when building a widget.

When developing a widget, it is your responsibility to support the code that get's output on the website. All of the code you write will be exactly output on the website. So, you should use standard browser APIs and features that are commonly supported across the majority of browsers.

Content Editor

When developing widgets, you can choose input options of each widget. This allows you to use standard inputs, such as text, images, links, lists and more. Learn more here. By using the standard input options that Duda provides, you keep a consistent editing interface for all users of the platform.

Design Editor

Similar to the Content Editor, Duda gives you the options to choose which high-level content inputs you'd like to use for your widgets. These allow you to get fully functional widgets for designing HTML elements like text, background, element dimensions, and more. These design inputs allow you to assign a custom CSS selector to define which HTML elements on the page will be assigned these values directly. Learn more here.

Publishing

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.

Versioning

All versions of your widget are stored under Settings -> Versions. You can restore from a previous version at any time.

Icons

Duda requires that you upload an SVG icon to the widget that is no larger than 30kb (the smaller, the better). This icon will display in the Duda editor under the Widgets tab for your custom widget.

Make sure it’s square (e.g. same width and height) and avoid adding default fill color styling to the widget. Duda will automatically set the fill color to match the colors set by the system.

Category

Choose a category under which the widget will appear. It’s best to choose a category that best fits your widget’s use. Currently, Duda categorizes widgets into six categories:

  • Basics (design / content based widgets)
  • Media (video or image related widgets)
  • Business (specific business function related)
  • Social (social networks/relations based)
  • Advanced
  • Other

Visibility

Access to a specific widget is controlled under General Settings. After a widget is first published the dropdown below will allow you to select one of three options. These availability settings can be changed at anytime.

It is a common pattern for a widget to start with an availability set to Private. This means only the developer sees the widget. After the developer has completed working on the widget the availability setting moves to Team which allows all team members to use the widget in the editor. Optionally the Public setting can be used if client access is desired for the widget.

Updated 4 months ago


What's Next

HTML

Widgets


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.