Skip to content
English
Sign in
  • There are no suggestions because the search field is empty.

Creating an AI Widget with a Duda Collection

Step 1: Create Your Collection

Start by creating a Collection in Duda. Your collection should contain all of the data your widget will need, organized into columns.

Lets start with the fields(column titles), not all the data yet.

For example, if you're creating an Events widget, your collection might include fields such as:

  • Event Name
  • Date
  • Time
  • Location
  • Description
  • Image
  • Category
  • Registration Link

Create whatever fields make sense for your project. Each column represents a piece of information your widget will use.

 

Step 2: Import Your Data

On the left, click the three dots on your collection and select Import Data.

Before importing, download the provided import template. This template ensures your data is formatted correctly for Duda.

Copy your existing data into the template, making sure it matches the template exactly.

Important:

  • Do not rearrange or shift rows.
  • Do not insert or delete rows in the middle of the data.
  • Keep every record in its original order.

If the rows become misaligned in the collection, the data can break the relationship between fields, causing the AI Widget Builder to display incorrect data or visible formatting/code (such as paragraph symbols or other unexpected characters).

Once your data matches the template exactly, import it into your collection.

 

Step 3: Make a List of Your Collection Fields

Before opening the AI Widget Builder, write down every field in your collection.

For an Events collection, your list might look like this:

  • Event Name
  • Date
  • Time
  • Location
  • Description
  • Image
  • Category
  • Registration URL

You'll reference these fields when describing the widget to the AI.

 

Step 4: Create the Widget in AI Widget Builder

Open AI Widget Builder and create a new widget.

Go to the preview mode, click the AI chat bot, choose Plan instead of Build.

The planning stage is where you'll explain everything you want the widget to do before the AI build and writes any cove. It will plan back and forth with you until it feels good and is ready to build.

Think of it as giving the AI a complete project brief.

For example, you might explain:

I want to build an Events widget that pulls data from a Duda Collection. The widget should allow me to enter the Collection Name in the settings so it knows which collection to read from. The collection contains the following fields: Event Name, Date, Time, Location, Description, Image, Category, and Registration URL.

Then describe exactly how you want the widget to work.

Examples include:

  • Display events as cards
  • Display events in a calendar view
  • Allow filtering by category
  • Allow sorting by date
  • Show upcoming events first
  • Open links when a button is clicked
  • Hide expired events
  • Include a search bar

The more detail you provide, the better the generated widget will be.

 

Step 5: Explain the Settings You Need

Tell the AI every setting you'd like users to be able to customize.

Backend settings might include:

  • Collection Name
  • Field mappings
  • Number of items to display
  • Default sort order
  • Filter options

Frontend settings might include:

  • Font family
  • Font size
  • Font color
  • Card width
  • Card height
  • Border radius
  • Button styles
  • Calendar size
  • Grid spacing
  • Background colors
  • Image sizing
  • Mobile layout

You can ask for general frontend and backend settings, but you'll usually get better results if you're specific about what should be customizable.

 

Step 6: Build the Widget

Continue chatting with the AI in Plan mode until it has a complete understanding of the widget.

Eventually, the AI will indicate that it's ready to generate the widget and prompt you to Build it.

Once you're satisfied with the plan, proceed with the build.

 

Step 7: Publish and Add the Widget

After testing the widget and confirming it works correctly, publish it.

Then add it to your website like any other custom widget.

Inside the widget settings, enter the name of the Duda Collection you created.

Once connected, the widget will automatically pull data from that collection and display it according to your design.

 

Updating or Fixing Your Widget

It's completely normal to make changes after the widget has been built.

If the widget isn't displaying correctly, is missing functionality, or you decide you'd like to add new features, simply return to the AI Widget Builder.

Before rebuilding, explain the changes in Plan mode. Describe exactly what you'd like to fix or improve, then let the AI update the plan before building the revised version.

Following this workflow—Plan first, then Build—typically produces better, more accurate results than jumping directly into building.

As your collection grows or your requirements change, you can continue refining the widget by repeating this process.