For the content that users enter into the content editor, you can output in HTML using the handlebars standard. The HTML content is rendered on the server and delivered down to the client in fully standard HTML.

Below is a list of the possible input types and how to output the corresponding type.

Basic Content

The text is the most basic input that you will want to output into your HTML. You’ll use the normal double curly brackets surrounding the variable that you want to output. For example, if you had a text input called buttonText, then the code below would print the text input.

<div class="ex">{{buttonText}}</div>

If statement

If statement checks if the value exists or is set to true. It will evaluate to false if it's an empty string, is false, or null. This is usually combined with a checkbox or toggle input.

{{#if checkbox}}
    <p>Checkbox is selected / true</p>
{{else}}
    <p>Checkbox is not selected / false</p>
{{/if}}

Unless

You can also use the unless handlebars helper, which is the inverse of if. This checks if the value is false.

{{#unless toggle1}}
    <p>Toggle is disabled</p>
{{else}}
    <p>Toggle is enabled</p>
{{/unless}}

Equals

You can use equals to define if a specific input equals a string. This is most commonly used with a drop-down input to check what the value inserted was.

{{#equals dropDown "value1"}}
    <p>DropDown equals value1</p>
{{else}}
    <p>Dropdown does not equal value1</p>
{{/equals}}

Not Equals

You can use not equals to define if a specific input does not equal a string. This is most commonly used with a dropdown or a list of inputs input, to check what the value inserted was.

{{#notEquals dropDown "value1"}}
    <p>DropDown does not equal value1</p>
{{/notEquals}}

Decode

Evaluate an input to check if it has a specific value. If they do, you can rewrite it to be a different value. This is great to use if you have a dropdown with many different options. It works by decoding an input, then checking if it equals a specific string. If it does, you can have it output a different string.

{{#decode dropDown 
    "dropDownValue1" "Output this if value is dropDownValue1" 
    "dropDownValue2" "Output this if value is dropDownValue2" 
    "Default output" }}
{{/decode}}

For example, if you had a drop-down named color with three entries (Red, Blue and Green), then you can use decode to get the output like this:

{{#decode color 
    "Red" "My Favorite Color Is Red" 
    "Blue" "My Favorite Color Is Blue" 
    "Green" "My Favorite Color Is Green" "Default output" }}
{{/decode}}

Each

Each allows you to loop through a list or array of items. This is always linked with the list input inside of Widget Builder. While looping through, you will have access to each inner item inside of the list.

<ul>
{{#each list1}}
    <li>{{listInnerText}}</li>
{{/each}}
</ul>

Data Variables

Inside of an each loop, you are able to access three data variables to aid in the logic and visual output of your widget. @index will display the current iteration of the loop, while the @first and @last variables are booleans compatible with the {{#if}} logic tag. The @index variable is zero-based, meaning its value will be zero on the first iteration of your loop, and increase by one for each subsequent iteration.

<ul>
{{#each list1}}
    <li>
    {{#if @first}}First Item!{{/if}}
    {{@index}} {{listInnerText}}
    {{#if @last}}Last Item!{{/if}}
  </li>
{{/each}}
</ul>

📘

The @index, @first and @last data variables are only available inside of an each loop.

Custom Helpers

Duda has several custom helpers that relate back to specific functionality in the platform. This ensures that you follow Duda's common practices and allows you to take advantage of native features more easily.

Links

Links must be handled in a specific way within Duda websites. Duda allows users to choose only valid pages, popups, ecommerce, etc. Due to this, Duda controls the entire output of the anchor markup to automatically format it to perform the correct action when clicked. To use the input of a link, you must use the custom_link helper

{{#custom_link linkVariableName}}
    <span>Anchor Text or {{linkText}}</span>
{{/custom_link}}

This will output as standard anchor markup:

<a href=”/about” relevant_attribute=”value”>
    <span>Anchor Text or About Page</span>
</a>

It’s important that you use this notation, as it allows Duda to expand on link capabilities in the future while keeping your links working as expected.

Buttons

Duda allows you to use our standard button. This allows you to add buttons as parts of widgets, or as a standalone button with additional features. The benefit of doing this is that the button will use Duda's standard classes and thus inherit all global styles for buttons on the website. You can also use the button input design type to easily add style settings for this specific button.

{{#custom_button btnText class="button-class"}}
{{/custom_button}}

📘

In the example above, you can include a custom class on the button, so that in the design settings you can target that button easier.

If you want the button to be a link as well, you can surround the button in the #custom_link helper as well.

{{#custom_link linkVariableName}}
    {{#custom_button btnText class="button-class"}}
    {{/custom_button}}
{{/custom_link}}

String Contains

A logic helper that allows you to check if a string that was input contains a specific string. If it's true, you can output a certain HTML element.

{{#strContains variableName "test"}}
    Input variable contains "test"
{{else}}
    Input variable does not contain "test"
{{/strContains}}

String Replace

Searches through an string that is input by the user and replaces part of it with a new string. Useful for trimming spaces or new lines from inputs into text boxes.

{{#strReplace variableName "findString" "replaceWith"}}{{/strReplace}}

Images

Images are straight forward, as you only need to output a standard image variable and Duda will return the URL of the image you should use. When writing images, you will want to make sure you write the markup and use the handlebars variable as the src.

<img src="{{imageVarableName}}" alt="{{imageAltText}}" />

The image input asks users to choose an image from the site image gallery. Duda will return an absolute URL to the image. You should not alter this image src in any way, as Duda often dynamically replaces this image source with other smaller or larger images, depending on the device that views the website.

📘

Duda recommends that whenever you are going to output an <img> tag into markup, you also ask the user for an alt text value of this image and place it as the alt attribute on the image (shown in the example above). This is a best practice for SEO, as it gives search engines an indicator about the content of the image.

HTML Escaping

By default, handlebars escapes the output of any content added to the widget configuration. If you want to avoid escaping and directly embed the content in the page, you can use the triple-stash output: {{{exampleVariable}}}. This is good to use with large text inputs, as you might want to allow users to enter spaces (
) or full HTML.

<p>{{{largeText}}}</p>

Updated 2 months ago


What's Next

Javascript

HTML


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.