Note
Available on Agency plans and up. Note that Agency and White Label plans can build and publish up to 3 custom widgets and add them to up to 10 times. Custom plans can build and publish unlimited widgets.
Duda’s custom widget builder lets you create fully custom widgets using HTML, CSS, and JavaScript, all inside the Duda editor. Whether you're integrating third-party tools or building unique site features, you’ll have the freedom to tailor functionality to your clients’ exact needs. The widgets you create are reusable across all sites, use built-in content and design components, and have built-in versioning management.
If you do not have coding experience, you can still build custom widgets by using the AI Assistant. To learn more, see AI Assistant in Widget Builder.
For Widget Builder access and setup instructions, see our Developer documentation.
To learn by video, check out Building Custom Widgets on Duda University.
Caution
Duda Support cannot troubleshoot custom code.
-
Custom code is very unpredictable. There are many factors as to why your custom code may not be working with our platform. If you need help getting the custom code working on your site, it might be worth hiring a Duda Expert to help you get your code working on your site.
-
Consent Management Apps are not able to prevent code from running prior to consent when the code is placed in the header HTML. This is because Duda optimizes the structure and order of how content loads, based on performance best practices on the site. We place scripts and CMP banners lower on the page, in order to improve the performance of primary content. Because of this, it is recommended to place code in the body-end when using a consent management app.
Use the power of AI in the Widget Builder to dramatically speed up development and turn a design or idea into fully functional widget code using Duda’s JavaScript API, even if you already know how to code. Instead of starting from nothing, you can describe your custom widget in plain language, and the AI Assistant will share a plan for the widget and then start writing the code for you. You can also use the AI Assistant to enhance existing widgets you’ve already built.
The AI Assistant in the Widget Builder has a competitive edge because it understands Duda's developer documentation and is able to generate reusable, scalable widgets that are simple for you, or your clients, to use. Whether you’re building a list with complex button actions or integrating external services like weather or stock data, AI helps you get there faster and with fewer errors.
To see how the AI Assistant makes creating custom widgets quick and easy, give one of the following ideas a try:
-
Custom bar chart
-
Dynamic video gallery
-
Design agency price calculator
-
Infinite scrolling carousel
To build a custom widget with AI:
-
From the dashboard, click Custom Assets and select Widget Builder.
-
Click Build New Widget and select Build with AI.
-
Type a name for your widget, then click Start Building.
-
Click the Sparkle icon in the bottom right of the widget builder to open the AI Assistant.
-
Enter a prompt to get started or browse our ideas for inspiration. You can also upload an image to show the AI Assistant an example of what you want.
-
The AI Assistant generates a plan and for how to create the widget you described, then it generates the code. Once that is complete, you can preview your widget or if you want to start over completely, click the Reset button.
-
Refine your widget as necessary by providing more details and feedback to the AI Assistant. When you are satisfied, click Publish.
Duda's Widget Builder comes with a fully-featured release and versioning system that helps you keep track of ongoing changes and enables you to rollback back to a previous version, or compare two versions together. Duda does this automatically each time you publish and doesn't require you to know Git or version control paradigms to take advantage.
To learn about versioning and how to publish, see our developer documentation.
You can duplicate a custom widget and create variations of it. Note that when you duplicate a custom widget, the entire code from the latest draft version is duplicated, not the latest published version.
To duplicate a custom widget:
-
From the dashboard, click Custom Assets and select Widget Builder.
-
Click the three dot icon next to the desired widget and select Duplicate. Note that the code from the latest draft version is duplicated, not the latest published version.
-
Enter a name for the widget. Note there is a 40 character limit. Then click Rename & Duplicate.
You can quickly and easily send custom widgets from your account to other Duda accounts from within the Widget Builder. All you need to do is generate a link and send it to your customer. Once the custom widget is accepted, it is added to the Widget panel for all sites in their account.
Guidelines for sending and receiving custom widgets:
-
Custom widget must be published before it is sent.
-
Only the latest version of the widget can be sent. If you make updates to the widget after sending, you will have to resend it for the customer to receive the latest updates.
-
Once the recipient accepts the widget, you cannot retrieve it.
-
You must be on an Agency plan or higher to use the Widget Builder, but the recipient of the custom widget does not need to be on an Agency plan or higher. Both staff members and account owners can receive custom widgets.
-
Duda does not facilitate payment for custom widgets, you must set it up outside of the platform.
To send a custom widget:
-
From the Dashboard, click Custom Assets, and then click Widget Builder.
-
Click the three dot icon next to the widget you want to send, and click Send. Or, open the desired widget and click General in the Settings menu, then click Generate Link.
-
Click Copy Link and send it to the recipient.
The link expires in 24 hours or after the user accepts the widget, whichever occurs first. Once the recipient accepts the widget, you will receive a confirmation email from Duda.
Note
If you update the widget after sending it, you need to resend the updated version. Resending the widget overrides the previously sent version of the widget. You can delete the widget and it will not affect the recipient and their use of the widget.
To accept a custom widget that was sent to their account, the customer will click the link you send them. The link expires after 24 hours or after they click the link, whichever comes first.
To accept a custom widget:
-
Click the link. It opens the widget dashboard.
-
Click Accept Widget, Preview, or Reject.
After accepting the widget, it will be available in the editor’s Widget Panel on all sites. If you are on an Agency plan or higher, you can view the widget in the Widget Dashboard.