Here are some example custom widgets to follow and learn how to build a widget from beginning to end.

📘

To learn more, check out Building Custom Widgets on Duda University.

Click to SMS

This guide is meant to be an example of building your first widget. The options are pretty basic, but allow you to create a Click-to-SMS (text) widget. This will allow site visitors to open their default texting application on their phone and pre-populate the message.

To get started, first open the widget builder from the Duda Dashboard.

Click the Create New Widget button.

Give the widget a name. For this tutorial we will use the name "Click-to-SMS".

Now you see all the different options available for a widget. Four main sections are listed on the left hand side: Widget Code, Content Editor, Design Editor and Settings.

We will start in the Content Editor and create all the content input types needed for the widget. To do this, click on the left panel item named 'Content Editor' and then click "Add input".

Content Options

For this widget, we need 3 total content input types. Each input is listed below along with the input type we will use.

Name

Type

Description

Button Text

Text

Control the text/call-to-action of the button

Number to Text

Text

The phone number that receives the SMS

Default Message Text

Large Text

Default body text sent via SMS

Button Text

We will start by creating the Button Text input. Since we are dealing with text we will select an input type of text as shown below (review all content input types here). Once the input type is selected all the available options for that type are displayed.

For the Button Text input we will update each of the following configurations.

  • Variable - btnText
  • Descriptive Label - Text/Call-to-action on button
  • Default Value - Click to text
  • Placeholder text - Text me now
  • Required field - checked

The input configuration should look like the following image. You'll notice a preview of what the input looks in the Duda editor is provided as well. This is updated as you make changes to the widget in the Widget Builder.

Number to Text

Next we will setup the Number to Text input. We will use a text input again with each of the following configurations listed below updated.

  • Variable - smsNum
  • Descriptive Label - Number to Text
  • Placeholder text - 415-555-5555
  • Required field - checked

📘

An optional phone number verification regular expression can be used on this field. Learn more about that here.

Message Body Text

Finally, we will setup the Message Body Text input. Since this input is responsible for the body of the text message we will use a large text input with each of the following configurations listed below updated.

  • Variable - messageText
  • Descriptive Label - Default Message Text
  • Placeholder text - Enter the default message that will be loaded in to your site visits SMS application after clicking on this link

Once finished, it should look like this:

Design Options

Now that we've added our content inputs, let's add our design inputs.

Button Style

For this widget, we will only need one design input. We will use the type of button. Let's add it and set the label as 'Button Style' and the custom selector as .smsButton.

📘

Learn more about all available design inputs here

Code

Now that we have the inputs, let's build the HTML output for our widget.

HTML

We will use the #custom_button handlebar helper and wrap it in a link to support the SMS capability.

<a href="sms:{{smsNum}}&body={{messageText}}">
    {{#custom_button btnText class="smsButton"}}
    {{/custom_button}}
</a>

There's a few things to take notice about with the above output HTML. First off, we are setting both the {{smsNum}} and {{messageText}} inside of the href of the link/anchor. This makes sure that we set the mobile device to open the default SMS app with the correct message text.

Next, notice that on the #custom_button handlebar helper, we pass the btnText which ensures the button will use the text defined in our Button Text input. We also set the css class of smsButton which ensures the Button Style design input type are applied to the button. Duda is outputting the button with the standard button markup for all sites. This makes sure our button always fits the design of the website.

Preview

We're now ready to test our first widget! Hit the preview button at the top right to see how it works. If done correctly, you should have everything working. Feel free to publish this widget. Of course, you should set your icon (svg) and set the privacy settings in the general settings of the widget.

Card Widget

A card is used to display a collection of information or actions. For example, if you have 3 different types of service, you might have 3 cards on your homepage each of which links to a different service. Cards are good at breaking up designs into logical sections that are clear to visitors. Here’s an example of a card layout/design.

In the example above the input types are numbered. These will correspond with the content input types that we will need for the widget itself.

  1. Title
  2. Description
  3. Card Images
  4. Image Alt Text
  5. Link Text
  6. Link Destination

We will start by creating a new widget and calling it Card Widget.

Content Options

After creating the widget we will define the content inputs for our widget. You will want to create content inputs in this order with the following settings.

Card Title

  • Type - Text
  • Variable - cardTitle
  • Descriptive Label - Title text of card (on image)
  • Default Value - Colorful birds
  • Placeholder text - Enter Card Title, keep it short
  • Required field - checked

Card Image

Image Alt Text

  • Type - Text
  • Variable - cardImgAlt
  • Descriptive Label - Alt text on image
  • Placeholder text - Enter a few words that describe the image above
  • Required field - unchecked

Card Description

  • Type - Large Text
  • Variable - cardDescription
  • Descriptive Label - Card Description
  • Default Value - Enter a description of your card / action here. This should be fairly short, but give website visitors enough context as to what value you're offering and what action you want them to take with the link below
  • Required field - unchecked

Card Link Text

  • Type - Text
  • Variable - cardLinkText
  • Descriptive Label - Link text
  • Default Value - Learn about our birds
  • Placeholder text - Enter action oriented text here
  • Required field - unchecked

Link

  • Type - Link
  • Variable - cardLink
  • Descriptive Label - Link target/destination
  • Layout - embed
  • Required field - checked

📘

Since there are a large number of content options we can use the divider content input to help organize the content options

Design Options

For the last part of the widget, we need to set up the design input options. We'll have five total to allow design control over the widget.

Card Title Style

  • Type - Text Style
  • Descriptive Label - Card title style
  • Selector - .cardTitle

Card Description Style

  • Type - Text Style
  • Descriptive Label - Card description style
  • Selector - .cardDescription

Card Link Style

  • Type - Text Style
  • Descriptive Label - Card link style
  • Selector - .cardLink

Background Style

  • Type - Background
  • Descriptive Label - Background style
  • Selector - .cardWrapper

Card Size

  • Type - Dimensions
  • Descriptive Label - Dimensions
  • Selector - .cardWrapper

The final step here will be to turn off the allow resizing. Since we already give resizing within the widget design, we do not want to allow users to resize using the inline style options.

Code

Our card widget will use custom HTML and CSS both defined below.

HTML

In the HTML section, place the HTML below.

<div class="cardWrapper shadow">
    <div class="cardImg">
        <img class="cardImg" src="{{cardImg}}" alt="{{cardImgAlt}}"/>
        <h3 class="cardTitle">{{cardTitle}}</h3>
    </div>
    <div class="descriptionWrapper">
        <p class="cardDescription">{{cardDescription}}</p>
    </div>
    <div class="cardLink">
        {{#custom_link cardLink}}
            {{cardLinkText}}
        {{/custom_link}}
    </div>
</div>

You'll notice the same variable names from our content input options as well as css classes we used as selectors for our design options.

CSS

Next, let's go ahead and write our CSS for the widget. This will give the widge it's structure and make sure everything fits in the correct place.

.cardImg {
    position:relative;
}
.cardImg img {
    display:block;   
    position:relative;
    top:0;
    left:0;
    bottom:0;
    right:0;
    width:100%;
}
.cardImg .cardTitle {
    position:absolute;
    left:0;
    bottom:0;
    padding:0 0 20px 20px;
    margin:0;
    color:#fff;
}
.cardDescription {
    padding:20px;
    margin:0;
}
.cardLink {
    padding:20px;
    border-top:1px solid #ccc;
    margin:0;
}
.cardWrapper {
    background-color:#fff;
    position:relative;
    margin: 0.5rem 0 1rem 0;
    transition: box-shadow .25s;
    border-radius: 2px;
    height:100%;
}
.shadow {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
}
/* add this to desktop-tablet.css */
.cardWrapper {
    /*Set default width on desktop/tablet*/
    width:350px;
}
/* add this to mobile.css */
.cardWrapper {
    /*Set default width on mobile*/
    width:100%;
}

You'll notice we have global CSS as well as device specific css. Make sure to copy all three to their corresponding css file.

Preview

If done correctly, you can now preview your widget and publish if you feel it's ready to go live. If you want a challenge, try making the card image linkable to the same target as the link at the bottom.


What’s Next
Did this page help you?