widget-pro

API workflow: Airtable image upload → Duda content library → Send Duda-stored image URL back to Airtable (Make collections more awesome!)

Thu, 20 Jan 2022 16:08:21 GMT

Make life easier for your clients and make their sites faster with optimized images by uploading images to Duda from their Airtable base

In a quest to make a custom widget using 12k-15k records in an Airtable collection as fast as possible and as easy to use as possible, I wrote out a script that uploads images to Duda and sends the Duda image URL back to the base, so it can be used directly in the collection on your website without dealing with the process of uploading the image to Duda yourself and manually grabbing the URL. Please note this ONLY works for image files with the content upload API endpoint.

Here's some code you can use if you're tech savvy.

Step 1: Add a scripting block in your Airtable base (requires a Pro plan)

In your Airtable base, add a new column and use the ' button ' field type. Connect it to the scripting app and create a new dashboard for your code. Add this script below. On line 3, replace the word Attachments with the name of your image column where you're uploading images to Airtable. The rest of the code is getting the current base, getting the details for the record in the particular row where you click the button, and grabbing the URL of the image itself and not extra details, like the name of the image.

Then it calls a serverless function that handles the calls to Duda and sends the response back to Airtable. I recommend using Google Cloud Functions for your serverless function because you can up the timeout time if you need to. The upload resource endpoint takes a while because it is making a bunch of versions of the image over at Duda and doesn't send the final image URL back until it's done.

2. Write your serverless function to handle the image upload to Duda and the response to Airtable

This code is going to read the request object from Airtable, get the image URL, upload it to Duda, wait for the NEW URL, then send that back to Duda.

In the GCP function, be sure to set the allUsers permission with the Cloud Function Invoker permission and to set HTTP as the trigger. That's about it! Once the new URL is added to your Airtable base, you can delete that old image in the base to save storage space, or simply leave both there.

FAQ

Can I use this to upload many images at once? Yes, you will need to write new code that generates the array for multiple images though and gets all of the source URLs. Duda can take up to 10 images at a time with this endpoint. You'll need to make an array of arrays of images and go through each one if there are more than 10 images in a record to be uploaded with a script.

My image didn't upload. Make sure you're using an image with a .jpeg or .png ending. If it's something you added via an Airtable search, it works like 5% of the time. The Duda documentation specifies that you are required to use a valid image URL, so don't use the .attachment Airtable format unless you want to have frequent failure of the function call. Import a real image file.

Can you set this up for me? Yep! Reach out for rates/availability. Widget Pro is also able to host your Airtable base in our Airtable Pro account and can configure your GCP function and manage it for a nominal monthly fee, or we can do a training session to get your GCP account setup if you're new to Google Cloud. Your Airtable workspace will need to be a paid Pro plan.

Can another developer set this up for me? Yep! You can find more Duda Experts in the Duda Community on the Duda Experts page. Widget Pro is a certified Duda Expert , but there are a growing number of other experts available in the directory. Just send them this tutorial and they should be able to make it work to your base and with their preferred serverless function platform.

How to add a 'publish date' field in your Airtable external Duda collection

Fri, 17 Dec 2021 19:02:14 GMT

By Liz Fedak

Published: Dec. 17, 2021

Learn how to use Airtable formulas to set up a publish date for your collection items

If you're anything like me, you like to work on your content as far in advance as possible and have it set up to take care of itself. When it comes to updating your collections, you might want to release new content every Monday, or get things ready to display for an upcoming promotion. This guide covers how to use Airtable formulas + the Duda API to publish your content exactly when you want it live.

What are Airtable formulas?

One of the available field types in Airtable is a 'formula field'. You can use this type of field to reference other fields in your table and to create functions based on the content in those fields. This tutorial covers how to use some of the date-related formulas.

Setting up formulas to validate a publish date and time

In the third column, click the plus sign at create the new formula column.
Name the column " Date time difference "
Select a " formula " field type. You can type in the blue search box to quickly find the right field type.
Add this formula into the formula field: DATETIME_DIFF(NOW(),{Date and time},'minutes')

The DATETIME_DIFF() function looks at the time difference between the current time and the date that is specified in the Date and time column. In the case of the example function, we asked for the difference in minutes. You can set that difference to be hours, days, minutes, and other options.

Now that we know the difference in time, we just have to know if the time is valid or not.

5. Add another formula column and name it " Date is valid ".

6. Paste in this formula: IF({Date time difference} > 0,"true", "false")

This formula uses an IF() function. What that means is that it looks at the IF() statement to determine IF it is true or false. In this case, it's saying "Is the value in Date and time difference greater than 0?". The next two values are then used based on if the answer is true or false. You can change what these 2 words say. For example, the same function could be written as: IF({Date time difference} > 0,"Date is valid", "Date is invalid") . When the question inside of the IF() function is true, the first value is returned. When the question inside of the IF() function is false, the second value is returned. So the column will now say true or false for all of the values.

In Duda, now you just need to do 2 things. First, you need to go to the collection settings and add the new " Date is valid " column as a Plain text type field. Then, on the widgets where you have it connected, use Duda's built-in options to filter for the records that have " true " in the last column, or whatever text value you are using for the true values.

If you need the collection to be updated as soon as the value is true, you'll need to refresh the collection. For that, use Duda's Clear cache API endpoint to revalidate/refresh your collection and set it up to run each week at a designated time (or however often you need your contents to auto-update based on your publish times). Let us know if you need help from a Duda Expert to set up your API calls.

I Saw a Christmas Tree Roll Across the Road Today

Thu, 16 Dec 2021 00:33:41 GMT

Today's the official release of my website widgetpro.io, and it almost didn't happen! Read the story to hear about the epic adventure I went on today to ensure I could make this happen.

Today was one of the most important deadlines I’ve ever set for myself–the official public launch of my business and this new website. I had everything planned out to launch in the afternoon today, but had a few unexpected obstacles that almost made the launch be delayed. Those obstacles amounted to a rather fun and very ridiculous adventure, so I wanted to share the story!

The challenges began yesterday when our family car got a nail in the tire and needed a patch. I was down at our mountain town’s co-working center working through my queue of modifications required before going live with my site when I decided to head home for dinner and to continue working at home. I discovered the low air in my tire and had to make a decision to try driving home and risk damaging the tire, or to have the nearby auto shop patch it up and pick it up the next day. I chose to go with the latter. Unfortunately, that meant walking home a few miles up a mountain, and returning back down the mountain the same way. The plan was to bike down the following morning and pick up the vehicle then head back and comb over widgetpro.io prior to launch. But another unexpected event made that a bit tricky! ( Below is a picture of the trail I took home up the mountain yesterday–before the snow .)

We woke up this morning in Nederland, CO to a beautiful snowy landscape and along with it, winds whipping snow across the sky at what must have been 50+ mph. The bike ride had to happen, but I figured I’d wait out the storm. But then our power went out. It wasn't clear if it would be a short outage, or something much longer, so I decided to brave the ice fest outside and bike into town.

If you’ve never biked in the mountains when the wind was whipping snow through the air at 50 mph, I’ve got to say I don’t recommend it. While I was covered adequately head to toe (I’ve been a winter bike commuter for ages), the wind was so intense that it would roll me backwards back up the mountain. I’d luckily thought to wear my ski goggles, so I was bracing and journeying onward, but had to stop when a particularly strong gust of wind swept through as it would knock me off of my bike. The bike ride, which only covered 3 miles, took about 1 hour because of the winds. Total piece of cake any other day, but not on days like this where Christmas trees escaped the grocery store lot and rolled across the town streets, or where I even saw a poor ground squirrel get swept from under his feet momentarily by a particularly strong wind (I made sure he got back to the dried roadside shrubs).

But in the end I made it! And I wanted to share that story to let you know that I will always ride my bike through a winter storm for you as well and follow through on my commitments. Thank you for checking out my brand new site and reading about my adventure today. I’ll be adding content steadily through Jan. 15, so all CSS tips, tutorials, and other resources will be free through then while the library is a bit slim. :-) If you are curious about my other services, you can visit this page. My widget shop is live, but I will not be processing new orders on "Coming Soon" items until Jan. 1. Please schedule a meeting on my calendar if you'd like to have a quick chat, just to say hi, or to see if there's anything Widget Pro can help you out with.

And if you’re at all curious about winter biking, this was my bike gear:

Insulated sleeves (Bike-specific gear to cover your arms)
1 heavy-weight wool shirt
1 sweat-wicking shirt
1 down jacket
1 raincoat
Warm underlayer pants
Water-resistant pants
Warm helmet-friendly bike cap
Safety vest
Shoe covers (Protects against wind and water)
2 pairs of gloves (1 liner, and 1 heavy duty)
Wool socks
Ski goggles
Neck bandana

Case Study: How I Built the Widget Shop

Tue, 14 Dec 2021 03:37:19 GMT

Widget Pro's widget shop is a custom Duda widget that I built in a day. Read on to learn about how you can make a similar widget!

Before doing an official launch of my new website, I wanted to build out a full widget shop page. I knew that it needed to be easy to search and filter over items in my shop and it had to look nice. I'm selling widgets after all and need the ones I use to look great! It was an easy decision to use Airtable as a Duda external collection to store my widget product data to power my custom widget shop widget (meta!).

Next, I had to plan out what the design of my shop would look like. After drawing some mocks up in Sketch, I synced with Chris and his team at Vendilli Digital Group with my Sketch renderings and they sent me a polished design file I could use for implementing the HTML and CSS a couple of hours later. Since I knew the content I'd need to dynamically render my product cards in the widget, I got to work next building out my Airtable table.

Fields I added in Airtable:

Widget name
Buy link
Demo link
Featured image
Tags (multi-select)
Tags (formula field that makes a sortable list of strings for my code)
Price
Tags (formula field that renders span tags with my tag CSS class added in + the name of each tag as the content
Description
Button text
Availability (formula field that determined the availability based on my button text)

Now that I had the structure of my data ready to go, I got to work building out the logic for my searching and filtering in the widget editor. I'd already made a ton of similar widgets, so I was able to save time by copying and pasting in custom code I wrote to search and filter over all of my categories and to generate all of my cards.

The code that I use has a few great features that make it easy to implement new search and filter widgets quickly. To establish my cards, I write out what fields need to exist in each 'template' of a card, then generate a template for the card as a string of HTML that I use in my JavaScript. To populate the data, I can usually just reference the data directly from Duda in the widget using the data.config object. In this case though, I needed to process some information for sorting and generate an array from the list of strings that I set up in Airtable. There's not a way yet to directly send data objects from Airtable to Duda (that I know of!) so I had to use JavaScript to split the string and create an array.

Setting up the cards is fairly straight forward–you configure the template, then you the HTML elements to the document for the cards, which are generated using the template string.

The tricky part is all of the logic. My tags let multiple tags belong to one item, and my search lets you select multiple tags to pull up all of the matching results. To solve that challenge, I wrote a JavaScript Class that keeps track of all of the current checked checkboxes. When a checkbox is changed (checked or cleared), I run a filter function that I wrote. The filter function looks at the tags, authors, and agencies that are stored in my object and checks against each of the items in my widget list to see if it's a matching result or not. Then it only displays the ones that are a matching result. Sounds easy, right. ��

There are a few more things I needed to address once all of the logic was in place. First off, 3 cards in a row next to search and filters looks terrible on tablet and mobile views, so I had to alter the template grid layout for mobile and tablet. I moved quite a few elements for the mobile view so I wound up using Handlebars helpers to selectively show different HTML elements depending on if the device was mobile vs tablet or desktop.

Another fun thing I added was the alternating colors on the tags. That was easy to achieve with some #n in my CSS to target the children occurring at every first, second, third, and fourth position since I had 4 tag colors to use.

Finally, I also added in an option to close the side bar. This was actually the easiest part and I used CSS and jQuery to toggle the sidebar open and close. I added a tooltip to make it easier to know what the arrows were for. I didn't make the reversed icon yet, but plan to have the image change to face the other direction once the widget has been closed.

Case Study: Content Snare <> Duda API

Mon, 13 Dec 2021 21:42:42 GMT

Streamline your content collection process using Content Snare and use the Duda API to make a site directly from the Content Snare form when it's complete

If you've ever faced the nightmare of tracking the status of incoming site content from clients across email, a project management tool, and their new Duda site, this tutorial on how to integrate Duda with Content Snare is just for you.

How StoryWeb Creative Uses Content Snare with Duda

StoryWeb Creative is a web agency based out of Colorado that builds lead converting websites and offers brand strategy consulting, copywriting and SEO services. StoryWeb was already using Content Snare to collect data from their clients and knew there must be some way to send that information to Duda via API to create new websites for their clients. They reached out to Widget Pro and we came up with a solution that was able to send the data from Content Snare over to Duda to build new sites with the client’s business info, logo, and images already included in their website. Next we’ll take a look at what Content Snare is, then cover how you can set up your own integration!

What is Content Snare?

Content Snare is a juiced up content collection tool that you can use to gather not only content for your client's site, but also details like template and color preferences, assets, business goals (think upsell opportunities), and more. You might be thinking "But I can just use the Duda content collection form...," which is great for getting started, but misses out on some of the key features that Content Snare provides. Those extra features, like being able to approve or reject fields, sending automated email or SMS reminders to fill out the form, gathering color and style preferences, and organizing questions into easy to complete pages and sections, can ultimately improve your customer's onboarding experience and save you time.

"Duda already saved our agency tons of development time when switching from WordPress, but the constant back and forth via email to collect information and brand assets was still painful. Using Content Snare in conjunction with the Duda API means that not only do we have a more streamlined and trackable way to collect information, but it also saves us even more development time because all our designers have to do is connect elements to the information that was dumped into the Business Info library by the automation." – Adam Wills

How does it work?

In Content Snare, content is collected via a "Request", i.e. a custom form, and each field has an individual status tracker. You can set deadlines and automated email or SMS reminders to ensure your client gets their content submitted, without having to personally hassle them. Those requests can be templated so you can send the same form to each new client.

Organizationally, you can group your questions into sections or pages. For example, you might have a social media page where you are collecting all of the social media fields from your client. What that means is not only can you collect content and assets from your client using a request, you can also gather things like advertising preferences and other information that you'll use on the business side and not just on their website.

How can I integrate Content Snare with Duda?

If you have API access in your Duda account, you’re able to send data from Content Snare to your Duda websites using the Duda API. The key webhook that you should use in Content Snare is the “Request Complete” webhook–it sends a full copy of the form’s data to an endpoint anytime that you finalize a request after the client has submitted all of the fields and you’ve approved them.

That blob of data that Content Snare sends out is what can be used by your developer to create Duda-readable data objects that can be sent to your Duda websites via the Duda API. When it comes to webhooks, what’s happening in a nutshell is a type of trigger is set off in the origin platform, and when it’s triggered, it’ll send a blob of data to a predetermined endpoint. The company that is sending the data determines what format to send the data out in, so there can wind up being many layers of nested objects and arrays, which are types of objects that can store data as key value pairs or lists. When the data is received at the destination, if the receiver doesn’t know how to handle the data, the call will just fail and end there. So it’s required to send the data to an intermediate handler that can make the data usable for Duda API calls. To do that, you need to first look at the structure of the data that Content Snare sends when the webhook is triggered, then write code that can find the right values to send to the next step of the flow.

Widget Pro wrote custom code that handled the transformation and hosted it as a serverless function on a platform called Vercel. The serverless function parsed the data from Content Snare then sent API calls to Duda to create or update a site with the form’s content.

We wound up using 3 primary Duda API endpoints to complete the integration:

Create Site
Update Content Library
Upload Resource

Create Site : The create site endpoint was used to create a site anytime a client site didn’t already exist. We used logic in the form to determine which API flow to run, either to create a brand new site, or to update an existing site.

Update Content Library : The update content library is the most important endpoint to use for the flow. It lets you add fields to your site’s Business Info fields, including any built-in business info text, and additional custom texts.
Duda requires the content to be added in a very specific format, so the data handling should be set up by a developer who can parse the required data from Content Snare and send it over to Duda in the updated format.

Upload Resource : We used this endpoint to upload client-submitted images to the new website. This endpoint only can handle 10 images per call, so we had to buffer the total number of images across numerous API calls depending on how many images were submitted.

In the end, StoryWeb Creative is able to save time using Content Snare by having their client content intake be automated by the tool and by having the site build itself and be pre-filled with content without even opening up an editor.

Throw some thoughts in the comments how this type of automation could help your business! If you don’t already have a developer on your team, the Widget Pro can be hired to set up a custom Content Snare <> Duda API integration for your agency. Let’s Duda this!

Case Study: How the COPreneur Path Podcast Uses an Airtable External Collection in Duda to Showcase their Episodes

Mon, 13 Dec 2021 21:42:39 GMT

Learn how StoryWeb Creative used Duda's dynamic pages and custom widgets to manage weekly podcast content for the COPreneur Path Podcast

The challenge

The COPreneur Path Podcast is published weekly and has a varying list of guests, related topics, and other data that was not always consistent in structure across each episode. They also needed a searchable list of episodes that would display the most recently published episode and could feature various details, like the season number, description, and tags.

Overall, the COPreneur Path Podcast needed a way to easily manage their episodes and have the episodes published at a specific time every Monday morning, which is not a collection feature–at least not yet!

The solution

Widget Pro developed several widgets, including a dynamic list widget that pulled in data from Airtable and rendered it in order of the most recent episode, and several custom widgets for the episode listing page so that speaker information could be listed, resources could be configured, and timeline counts could be displayed in a table. Widget Pro and Storyweb Creative brainstormed a Zapier flow that moved upcoming episodes into the existing table when it came time to go live Monday morning.

The Widgets

Podcast list: The podcast list is dynamic and connects with an external Airtable collection. A search bar makes it easy to find an episode by keyword.
Guest speaker social: Guests didn't always have the same social media links, so the built-in social media widget wasn't cutting it. Additional social media icons, like MeWe and Rumble were needed as well. Widget Pro built a widget that renders the social and contact links for the guest if the field has the details filled in (and remains blank otherwise).

Episode timestamp markets: COPreneur Path Podcast was able to get the episode details from their podcast hosting website, but it didn't come through to Duda in a format that was easy to read. Widget Pro developed a widget that parsed the markdown sent by Airtable and generated a table for the timestamps.

From this...

To this...

HTML generator: COPreneur Path Podcast needed a way to easily display custom links that would occasionally have nested links and would have varying formats. Widget Pro created a spreadsheet in Google Sheets that can handle all of the potential HTML formats and concatenates the list to generate the HTML for the section, then it just had to be displayed in the editor in a custom widget. Note that Duda has since made the HTML widget connected-data ready.

From this...

To this...

Blog tags custom widget tutorial

Mon, 13 Dec 2021 01:44:12 GMT

Build a one-line Duda widget for extra blog functionality

This widget is meant to be used for the Duda blog webhook --> Zapier<>Airtable<>Duda integration tutorial and isn't particularly useful outside of that use case.

Follow the video tutorial to set up this custom widget for use with the Duda blog integration with Airtable via Zapier.

Widget Settings

Step 1. Add the HTML

Copy and paste this line of HTML into the HTML page of your custom widget.

Step 2. Add a Field in the Content Editor

You only need to add one field. Select input type 'Text' and copy and paste the values in for Variable, Descriptive label, and other fields. Make sure your Variable matches 'tags' for character casing.

Input type : Text

Variable : tags

Descriptive label : Tags

Default value : tag1, tag2, tag3

Tooltip text : Comma separate the tags

Step 3. Add a Field in the Design Editor (optional)

You can optionally add a design editor field if you want to stylize the tags in your blog posts.

Input type : Text Style

Descriptive label : Text Style

Custom Selector : .tags

Step 4: Publish!

Make sure lazy loading is off.

Build a custom Duda widget that displays an author image and links to their author page

Mon, 13 Dec 2021 00:42:15 GMT

Tired of the default blog widgets? So was I! ;) Read this tutorial to learn how you can add a custom author bar widget

At the end of the day, your Duda website is made out of HTML, CSS, and JavaScript. We can tap into the HTML using JavaScript to manipulate what shows up on the blog page after it renders. Read the rest of the tutorial to learn how! You should have some familiarity with HTML, CSS, and JavaScript to understand what's happening in the code, but I'll give some high level context, so it's okay if you can't read code.

All of this code should be added to a custom widget in the Duda widget builder. Check out Duda course on Building Custom Widgets if you need a quick introduction to the widget builder.

Step 1. Find the author's name & generate the author URL

Duda uses a data attribute in the HTML for the line that renders the author's name on your website. What is a data attribute? Using MDN's description: "Any attribute on any element whose attribute name starts with data- is a data attribute."

This is what that looks like if you pull up a blog post on a Duda site and dig around in the HTML: [data-inline-binding='blog.composedAuthor'] (edited 4/27/23)

Since we know that exists, we can use JavaScript to find that HTML tag to retrieve the name, i.e., the inner HTML of that tag. If you configured your blog widget to show the date, you might also need to add some code to split the string so you're only retrieving the author's name. (That's the ` .innerText.split((' •')[0]; ` part of the example below.

Using the author's name, we can compose a link to their author page. The first option in the next JavaScript examples uses a "Text" input in the Duda widget builder's Content Editor tab with the variable name ` urlBase `. If you're only using this on one site, you can skip that step and simply write in your URL, as you see in option 2.

Great! Now we have variables with the author's name and a link to their author page. Not super useful out of context, but with a little more JavaScript magic, we can render the name and author image with a link to the author's page and remove the default author line.

Step 2. Retrieve the author image URL

For the sake of simplicity, in the demo we hard-coded an object that has a list of the author names and their profile images using a JavaScript object. To retrieve the author's image URL, we will look up the URL value using bracket notation on the ` authors ` object and assign it to a variable named ` imageURL `.

Step 3: Add HTML

The HTML below will give some structure to the elements we are going to add to the DOM with JavaScript. You can change your HTML and classes to suit your preferences. This HTML is what we use on givityapp.com 's blog post. Scroll up to check it out!

The image URL you see below is a generic anonymous user image. When the blog page loads initially, it'll load with the anonymous profile image until the author's image loads.

<a>

<div>

Step 4: Add some more JavaScript

Now we're ready to manipulate the DOM! We have access to the author's name, profile page, and their profile image.

This example uses .find() to manipulate the HTML we added and to remove the original author line. There are a few things going on here, mainly, we are modifying attributes of those elements with the author data from the previous steps, and rendering new HTML using that data.

Step 5: Make it pretty!

Disclaimer, I'm not a designer, so I consider this to be pretty. :) The CSS below will stylize the widget as you see in our author bar above. Modify the classes to suit your needs!

widget-pro

API workflow: Airtable image upload → Duda content library → Send Duda-stored image URL back to Airtable (Make collections more awesome!)

Make life easier for your clients and make their sites faster with optimized images by uploading images to Duda from their Airtable base

Step 1: Add a scripting block in your Airtable base (requires a Pro plan)

2. Write your serverless function to handle the image upload to Duda and the response to Airtable ﻿

FAQ

How to add a 'publish date' field in your Airtable external Duda collection

By Liz Fedak

Published: Dec. 17, 2021

Learn how to use Airtable formulas to set up a publish date for your collection items

What are Airtable formulas?

Setting up formulas to validate a publish date and time

I Saw a Christmas Tree Roll Across the Road Today

Today's the official release of my website widgetpro.io, and it almost didn't happen! Read the story to hear about the epic adventure I went on today to ensure I could make this happen.

Case Study: How I Built the Widget Shop

Widget Pro's widget shop is a custom Duda widget that I built in a day. Read on to learn about how you can make a similar widget!

Case Study: Content Snare <> Duda API

Streamline your content collection process using Content Snare and use the Duda API to make a site directly from the Content Snare form when it's complete

How StoryWeb Creative Uses Content Snare with Duda

What is Content Snare?

How does it work?

How can I integrate Content Snare with Duda?

Case Study: How the COPreneur Path Podcast Uses an Airtable External Collection in Duda to Showcase their Episodes

Learn how StoryWeb Creative used Duda's dynamic pages and custom widgets to manage weekly podcast content for the COPreneur Path Podcast

The challenge

The solution

The Widgets

From this...

To this...

From this...

To this...

Blog tags custom widget tutorial

Build a one-line Duda widget for extra blog functionality

Build a custom Duda widget that displays an author image and links to their author page

Tired of the default blog widgets? So was I! ;) Read this tutorial to learn how you can add a custom author bar widget ﻿

2. Write your serverless function to handle the image upload to Duda and the response to Airtable

Tired of the default blog widgets? So was I! ;) Read this tutorial to learn how you can add a custom author bar widget