Power up your editors with no-code integrations for Umbraco

tagged with Content Umbraco Forms

In this article I will dive into how combining Zapier's automation prowess with Umbraco's flexibility can power up marketing teams and content editors.

In my past roles, a common challenge I encountered was clients lamenting the inflexibility of their websites, particularly when integrating with marketing tools. They’d frequently say:

“Our website is not very flexible, and we can’t integrate it with the tools we use in our marketing department.”

However, I believe the issue isn't inherent inflexibility but the complexity of the work required behind the scenes. Integrations often extend beyond simple 'plug and play' solutions.

A notable observation is the developer shortage, leading to impatience among clients once they recognize their needs – a reaction that is, to some extent, understandable.

Nevertheless, solutions exist to mitigate these challenges. Among other alternatives, one such solution is Zapier.

In my first contribution to 24 Days, I aim to inspire with practical ways to enable clients and marketers to implement Low/No Code integrations using Umbraco and Zapier, drawing on our experience from the Growth Team in Umbraco.

Understanding Zapier

Before diving into the specifics of how Zapier works in tandem with Umbraco, it's essential to understand what Zapier is and the role it plays in web automation. Zapier acts as a dynamic connector to hundreds of web apps and services, enabling them to interact seamlessly.

It simplifies the creation of automated workflows, known as 'Zaps.' These Zaps begin with a trigger – an event in one app that initiates the workflow.  They conclude with an action, an automated event in a second app. And if you need to, you can run multiple subsequent actions which also includes branching logic. This powerful tool transforms complex tasks into efficient, automated processes, making it an invaluable asset in web integration and marketing automation, all in a visual way. 

The image displays a simplified graphical representation of a two-step process with a light background. The first step is labeled "Step 1 Trigger" and is accompanied by a symbol of a blue dot inside a white square. The second step is labeled "Step 2 Action" and features an orange square. Three orange dots connect the two steps, indicating a sequence or flow from the trigger to the action. The design is minimalistic, with a focus on the progression from one step to the next.

Simplified drawing of Triggers and Actions in Zapier

How to empower the end client with no-code options in Umbraco

The very simple and easy way to enable simple integrations is the webhook option in Umbraco forms. This is a very basic but powerful way for marketers to integrate their forms with other tools that allow for webhooks. For a couple of years, this was the backbone connection to our CRM with Zapier as our middle layer.

But there's also a way that requires you to set up and configure the Zapier apps for Umbraco. This approach significantly enhances the capabilities of marketers, effectively acting as a 'power-up' for their workflow. Now, this is our backbone for integrating to other tools and applications.

Screenshot of Umbraco forms configuration with the "send to URL option" with the Post method enabled.

By setting up a simple webhook, you can easily connect Umbraco forms with Zapier

Exploring the Possibilities

To demonstrate the potential of these integrations, I've compiled a few examples. Some are simplified versions of our current setup in Umbraco, while others represent concepts either waiting in our project backlog or previously considered and set aside.

My goal is to offer these as a source of inspiration and to showcase the versatility of Umbraco and Zapier in practical scenarios. I have split them into 2 categories - those that use Umbraco forms integration, and those that use the CMS integration.

Enhancing Umbraco Forms with Zapier integration

A particularly valuable feature is the integration between Umbraco Forms and Zapier. This connection opens up a myriad of possibilities, extending the functionality of your forms significantly. Below are some foundational examples from our own experience, which you can further build upon and customize according to your needs.

Streamlined lead management

Our primary use of the Umbraco-Zapier connection is for managing leads. It allows us to funnel leads directly from our website forms into the CRM. Before their CRM entry, these leads can undergo preliminary checks or data reformatting using Zapier's built-in tools. This setup also facilitates cross-referencing with email marketing tools to verify if the user already exists in other databases.

While achievable through an API integration, Zapier's flexibility is invaluable, especially as business needs evolve. For instance, adding two new fields to a form that has to be sent through the API can be swiftly addressed within Zapier, often more quickly than adding a task on Azure Boards.

The process starts with a trigger for a new form submission in Umbraco, followed by an email validation step using NeverBounce. It proceeds to check if the lead, contact, and company exist in the CRM. Based on these checks, the workflow branches into different paths: updating contact information if found, updating lead details if a lead is found, or creating a new lead if none exists.

The process starts with a trigger for a new form submission in Umbraco, followed by an email validation step using NeverBounce. It proceeds to check if the lead, contact, and company exist in the CRM. Based on these checks, the workflow branches into different paths: updating contact information if found, updating lead details if a lead is found, or creating a new lead if none exists.

Collect survey responses and send directly to Google  Sheets

You can easily collect survey responses by integrating Umbraco Forms with Zapier to funnel data straight into Google Sheets. This method bypasses the need for embedding third-party tools on your website, streamlining the process. Once in Sheets, you can enhance the data with your preferred visualization tools or directly create graphs. This approach not only simplifies data handling but also offers a smoother user experience by keeping everything within your site. We successfully implemented this for user feedback and tests on Umbraco.com.

Image displaying a two-step Zapier automation workflow. The first step is a trigger labeled '1. Umbraco Forms - Survey response submitted,' indicating that the workflow begins when a survey response is entered into Umbraco Forms. The second step is an action labeled '2. Responses collected in Google Sheets - Create new spreadsheet row,' showing that after the trigger, the survey response data is automatically sent to Google Sheets, where a new row is created for each submission

Zapier workflow automation showing a survey response submission in Umbraco Forms triggering the creation of a new row in a Google Sheets document.

Simple event sign ups

Using our Umbraco-Zapier integration, we easily sync event sign-up data with our CRM. This synchronization helps us avoid sending unnecessary reminder emails to those who have already registered.

We use this setup for handling our signups for our Partner summits and other events to make sure they get the right information from our marketing automation system, but also to record it in Google Sheets and send automated slack notifications to the team involved.

Leveraging Umbraco Document Types with Zapier

The integration between Umbraco Document Types and Zapier is triggered by the 'publish action' in Umbraco. Whether you're publishing new content or updating an existing document, this action activates a Zapier trigger. This functionality opens up a range of innovative possibilities for marketers, enhancing their workflow and content management capabilities.

Automated posting on social media

This is really nothing new and has been possible in many years. We don’t use it ourselves, but setting it up is relatively straightforward. This integration allows for the automatic publication of your latest news or updates across various social media platforms. Additionally, you can configure a specific field in Umbraco to provide the text for these updates, streamlining the content sharing process.

Let’s connect ChatGPT to the mix

Zapier sequence for content distribution: Starts with content publication in Umbraco, followed by a ChatGPT-generated status update, and culminates in posts to Facebook Pages and LinkedIn.

Screenshot of a four-step automation workflow in Zapier. It begins with a trigger labeled '1. New Content Published in Umbraco.' The second step is an action titled '2. ChatGPT Prompt - Write status update.' The third step is '3. Create Page Post in Facebook Pages,' and the final step is '4. Create Company Update in LinkedIn.' Each step is accompanied by the appropriate platform icon and the steps are connected by a vertical dotted line, indicating the flow of tasks.

With the advent of generative AI technologies like ChatGPT, it's an opportune time to explore new frontiers. Integrating ChatGPT with Umbraco and Zapier can revolutionize how we handle social media content. Imagine publishing your content, then having Zapier instruct ChatGPT to craft a tailored social media post. This post can then be directly shared on your platforms.

I would personally still do the final edits, though. So instead, you could send your published content into your content calendar (we use Airtable for that). Then, you could set up Zapier to  output the ChatGPT generated content into your content calendar, where you can give it the human touch while benefiting from generative AI efficiency.

Automated alt text creation with ChatGPT

This is not a refined idea yet, and I believe it will require some custom development, from someone with more technical Umbraco knowledge than I do.

Creating meaningful alt text for images is crucial for accessibility but I have to admit that I sometimes forget to add them. I've found that ChatGPT excels in generating relevant and descriptive alt text. Currently, I manually upload images to ChatGPT for alt text creation.

Imagine a more automated approach: configuring the media library to trigger a Zapier workflow. This workflow would prompt ChatGPT to analyze images and generate alt text, which is then sent to a Slack channel. From there, I can easily retrieve and add it to the website. Or it could be fully integrated with the API. 

Screenshot of a ChatGPT conversation where the user asks for an alt text for an uploaded image. The image is a A Chow Chow dog centered on a checkered floor, with an imposing, cloud-swirled tunnel stretching into the sky behind it, creating a striking visual contrast.. ChatGPT replies with the same ALT text proposal as was just described.

ChatGPT generating ALT text for images

How can you use all of this? 

As we reach the end of this exploration, my aim has been to not only inspire but also to demonstrate practical ways in which marketers that use Umbraco can harness the power of automation in their daily tasks. The examples provided illustrate just a fraction of what's achievable when combining the versatility of Umbraco with the adaptability of Zapier.

I hope this article has sparked new ideas and enthusiasm for your projects. If you have any questions or ideas, please don’t hesitate to reach out to me. I'm keen to hear your ideas and thoughts on this.

Wishing you a season filled with creativity and innovation – have a wonderful Christmas and an exciting journey with Umbraco and Zapier!

How to get up and running with Zapier and Umbraco 

Integration with Zapier in Umbraco is straightforward, especially with webhooks. Detailed instructions are available on the Umbraco documentation platform under "Connecting Umbraco Forms and Zapier."

For more advanced functionality, consider exploring the Zapier add-ons developed by Umbraco. These include:

Zapier: Umbraco CMS Integration
Zapier: Umbraco Forms Integration

Niels Christian Laursen
Niels Christian Laursen