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 with the help of Copilot. To learn more, see Use Copilot to Build Custom Widgets.
For Widget Builder access and setup instructions, see our Developer documentation.
To learn by video, check out Building Custom Widgets on Duda Academy.
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.
Copilot permission is required to use this feature.
Use the power of Copilot 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 Copilot will start writing the code for you.
Note
-
AI credits are free while this feature is in testing, however when testing is complete we are moving to a credit-based model. Read the AI Credits for the Widget Builder article to learn more.
-
You can also use Copilot to build custom site widgets directly in the editor. Unlike widgets built in the Widget Builder, custom site widgets can only be used on the specific site they were created with and cannot be used on other sites in your account. To learn more, see Build Custom Site Widgets with AI.
Select the Library tab to browse premade widget that you can remix and make your own. Use the Category dropdown menu to filter by widget category.
To remix, click the desired widget, then click Remix.
To see how Copilot 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 Copilot:
-
From the dashboard, click Custom Assets and select Widget Builder.
-
On the My Widgets tab, click + New Widget.
-
Type a name for your widget, then click Start Building.
-
Click the purple Copilot icon in the upper right of the widget builder to open Copilot.
-
Enter a prompt to get started or browse our ideas for inspiration. You can also upload multiple images or files to show Copilot an example of what you want.
-
Copilot generates the code. Once that is complete, you can preview your widget inside the Widget Builder, or click Test in Editor to see how the widget will work on your site.
-
Refine your widget as necessary by providing more details and feedback to Copilot. 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.
You can archive widgets that are unpublished to help keep your widget dashboard more organized and free of clutter.
To archive a custom widget, navigate to the Widget Builder and click the three dot icon next to the custom widget, then select Archive. Currently, you cannot restore an archived widget.