Javascript

As part of widgets, Duda allows you to use standard JavaScript. This can be used to load content, add custom functionality and more. We also give you easy access to both the DOM element, data input to the widget and a few helper values passed into the callback. Below is a list of helper objects.

All the Javascript you include in the widget is executed when the widget is loaded on the page, from a callback function. In the function, there are three variables passed in: element, data, and api. Each is documented below.

Element

A direct reference to the wrapper <div> DOM element of this widget. Here's an example of how you can interact with the element.

/** 
Example #1 - Simple JS command
**/ 
console.log("Element Class List: " + element.classList);
//Output: "Element Class List: widget-366254 dmCustomWidget"

/** 
Example #2 - with jQuery
**/
$(element).find('.childClass')

Data

The data object includes several child fields which help you code custom solutions. Below is each

Config

Accessed from data.config object. This contains variables of all the inputs entered in either the design or content section of the widget. If an input does not have a value (blank by default) then it will not be added to the data.config object.

/**
    Each input from the content section can be accessed through it's variable name: 
**/
console.log("Input with variable name text1 value is: ",data.config.text1)

Below is a list of all the inputs and the type of data you can expect when referencing via Javascript:

Input Type

JS Data Type

Additional Details

Text

String

Image

String

String is an absolute URL of the image

Icon

String

String containing raw SVG markup. Can be appended directly to the DOM.

Dropdown

String

String with the selected field from the drop down.

List

Array of Objects

Contains all nested items

Large Text

String

String of rich text values. Can contain markup for inline styles.

Date

int

A unix timestamp of the selected data

Radio

String

A String of the selected value

Toggle

Boolean

Slider

String

A string of the selected value

Checkbox

Boolean

Link

Object

An object containing link details, structued as follows:
{ "value": "http://www.duda.co", "label": "", "type": "url", "href": "http://www.duda.co", "raw_url": "http://www.duda.co", "target": "_blank" }

Video

Object

Object of the video selected (uploaded, youtube, etc..).
{ "videoUrl": "https://vid.cdn-website.com/a951ccfe/videos/Vnhi0p8OQVy2sYi7mU13_My+First+Day+Driving1-v.mp4", "poster": "https://irp.cdn-website.com/a951ccfe/dms3rep/multi/Vnhi0p8OQVy2sYi7mU13_My+First+Day+Driving1.v2.0000000.jpg", "type": "cdn" }

Device Type

A string containing the device that Duda detected as visiting the website. Can be accessed from: data.device. Allows you to change functionality based on device type. There are three possible values: desktop, tablet and mobile.

if (data.device==="mobile") {
    //do something if mobile
} else {
    //do something if desktop or tablet
}

In editor

A boolean value if the widget is currently in the editor or being viewed on a live website/preview. Accessed from data.inEditor.

if (data.inEditor) {
    //do something if in editor
} else {
    //do something regular if outside editor
}

Page Name

Access the name of the page the widget is currently being viewed from. This is the name the user has entered in the page settings while designing the site. Accessed from data.page.

alert("Current page is: " + data.page);
//Out: "Current page is: home"

Element ID

Access the unique ID assigned to this element. The ID is unique to the page it is on (not across the whole site). Can be accessed via data.elementId.

Site ID

Access the unique Site ID for the site across all of Duda. Also referred to as the site_name. Accessed via data.siteId.

Locale

Returns the two letter language code for the currently selected language. Accessed via data.locale.

API

API contains helper functions to perform additional functionality on the site. This includes things like getting Collections API, localization settings of a widget, and Rendering External Apps.


What’s Next
Did this page help you?