IFramed Configuration

Duda’s Widget Builder allows you to embed your own widget control panel/editing pane into a widget. This allows you to have a page/embed that connects directly to a service or backend you host and own. This removes any native Duda editing options (such as toggles, input boxes, etc..) and relies on your own hosted page here. This gives you the full flexibility of the web to install your own back-end and not be limited by any input types that Duda may or may not have.

This works by giving an embed URL to Duda. Duda will embed this URL as an iframe with in a widget editing panel. Then you will also need to connect this to the HTML that is output on the page directly in the output code of the widget builder. You will need to connect the widget editing panel to the code that is output in the website, via javascript or an iframe embed on the website.

Setting up the Widget

Inside of the widget builder, there is a setting to embed your own widget editor.

This will give you options to both set the URL of the embed (page you host) and also choose how wide the panel should be.

🚧
It’s important to make sure your embed(s) support HTTPS, as the Duda platform fully supports HTTPs at all points.

We give three size options for your editing panel to fit into:

Small (344px wide)
Medium ( 688px wide)
Large (963px wide)

Now, every time the widget is either added or edited, Duda will load up the frame URL you’ve added and append the following URL parameters to it:

Parameter	Description
Page	The name of the page it is installed on. This is the same as the 'page URL' and can be changed by the user
elementId	The unique 10 digit ID assigned to the installed element
version	The current version of the published widget. -1 means it has not been published yet
locale	The language of the user inside of the Duda editor. We currently support many languages, you can see a list here
accountId	A unique ID for the account. This is a 32 character string that represents the unique account owner on the Duda side
widgetId	The unique ID of the widget. This is a 32 character string that represents the unique widget across the entire Duda platform. Note: this is the same for all installed/active widgets
siteId	The site ID/name on the Duda side. This represents a unique site reference. Is between 8 and 32 characters long

Unique IDs for Widgets

Every time you install a widget, Duda generates a 10 digit integer for that element, the variable used here is elementId. This ID is unique per page of the website.

To create a unique ID, Duda recommends that you use the elementId + siteId, so that in your system, you can store settings based on the combination of these two IDs.

Accessing Parameters

In addition to adding the URL parameters onto the iframe settings embed, we also output the same values into the HTML & JavaScript. You can access them as follows

<p>Widget Id: {{widgetId}}</p>
<p>Account Id: {{accountId}}</p>
<p>Page Name: {{page}}</p>
<p>Element Id: {{elementId}}</p>
<p>Site Id: {{siteId}}</p>
<p>Widget Version: {{version}}</p>
<p>Editor Locale/Lang: {{locale}}</p>

console.log('Element Id is: ' + data.elementId);
console.log('Account Id is: ' + data.accountId);
console.log('Page Name is: ' + data.page);
console.log('Site Id is: ' + data.siteId);
console.log('Widget Version is: ' + data.widgetVersion);
console.log('Widget Id is: ' + data.widgetId);
console.log('Editor Locale/Lang is: ' + data.locale);