Video Demo: Webhooks, Automations, and Integrations with Sitefinity
Our President and Sitefinity MVP, Brad Hunt, talks about app integrations with Sitefinity and how to integrate these third-party applications with webhooks and the automation tool, Zapier.
What are webhooks and how do they work?
At the beginning of the video, Brad describes webhooks and how they work. According to Zapier, “Webhooks are automated messages sent from apps when something happens. They have a message – or payload – and are sent to a unique URL.” In our case, the app that is generating the message is going to be Sitefinity and when something happens a message will be sent, which will contain JSON data, and it will be sent to some other unique URL. In our instance, it will be a URL controlled by Zapier.
Understanding Sitefinity Event Hub
Sitefinity has a whole sub-system called the EventHub. Whenever a certain event happens inside of Sitefinity, the EventHub manages that event. For example, if someone leaves a comment, if someone changes a profile, or publishes a page then the EventHub will raise that event. Historically as a developer, you could write custom code to capture that event and capture the event details like the data of form submissions and then send that data to some other API. The main challenge with this is you need to be able to manually write the code, hook into the event, and process the data manually.
The beauty of webhooks is you don’t need to know custom code in order to create events and capture this useful data on your website.
Sitefinity Support for Webhooks
Starting in version 12.2, out-of-the-box Sitefinity has support for three different webhooks. The three webhooks supported by Sitefinity are when a form entry is created, when a log in is completed, and when there is an output cache invalidation. In each case, when these things happen on your site, an event is fired and you can tell Sitefinity to expose that event and send data to a URL.
Getting Started with Sitefinity Webhooks and Automation
We used version 13.1 of Sitefinity in our demo but if you have version 12.2 or higher than you can also make use of these same webhooks. We focused on the form entry event in Sitefinity because that’s what we are using to capture form data and send it off to Zapier.
For our demo, the first thing we did was created a few pages that have forms on them, both the pages and the forms we created ahead of time.
Setting up a Form for Automation
The first form in our demo is the contact form. We dragged some basic fields into the form like first name, last name, email, and a comments field. The one thing that is important to know when setting up a form for automation, (starts at 04:46) is to make sure you go into each form field element in the form editor, go to Advanced Properties, and set the field name. That field name is going to be used in Zapier so you want to make sure the form field name is set so that you can reference it in the zap that you are creating.
Registering an Event in Sitefinity
Once the form is set up, it will fire some type of event once the form is completed but how do we tell Sitefinity to listen for the event and take some kind of action. If you check out the webhook documentation, you will see the three supported events that were mentioned earlier and if you scroll down the page, there is a sample JSON for each of those events. In the sample JSON, you can see what the payload is that will be sent over to the other system.
At 06:13 in the demo, we show you how to register an event in Sitefinity.
To register the event in Sitefinity, you need to copy and paste whichever event you are working with. In our example, we are working with the IFormEntryCreateEvent
We copied the below event reference.
Telerik.Sitefinity.Modules.Forms.Events.IFormEntryCreatedEvent
Then go back to Sitefinity under Administration --> Settings --> Advanced Settings and then scroll all the way down until you get to Webhooks and then select Webhook events. When you start, you shouldn’t have any webhook events. In our demo, we added the events ahead of time. If you don’t have any events in this section, you will click on Create New and then paste in the event reference from the documentation and save the changes.
Once the event is listed under webhooks, you can then start to specify the URLs.
We added our URLs ahead of time but you can see in our demo that we have URLs that are from Zapier.
Posting the Data from the event
You have to know where you want to post the data, which comes from the automation tool, and in our case, that would be Zapier.
In Zapier, we create a new automation for the contact form. In Zapier, they call the automation you create a “Zap”. In other automation tools like Microsoft PowerAutomate, they call this a “flow”. For our contact form, we create a new zap with out-of-the-box steps that Zapier provides. One of the things they have is a webhook step. Important to note that this is only available on premium accounts. To get these premium steps in Zapier, you need at least the Starter plan that as of writing this blog is $19.99 per month when billed annually or a $24.99 month-to-month subscription.
In Zapier, we being creating our zap by choosing the webhook step and then choose the trigger event. The trigger event is what causes the series of steps or your zap to fire. You can either poll a URL, meaning you can have it go off and check a URL or it can catch a hook. We want it to catch a hook because Sitefinity will trigger the webhook and it will send data over to Zapier.
There are two choices for the trigger event, Catch Hook or Catch Raw Hook. In our demo, we chose to just catch a hook. The next thing it tells us is the URL that needs to be copied and pasted into Sitefinity so that Sitefinity knows where to send the data. We copy the URL and go back to Sitefinity settings. Under URL we are going to paste the URL in there and save the changes.
It’s time to test this step. We go to our contact form, fill it out, and hit submit. Once the form is submitted, go back to Zapier and hit continue on your zap. Once we do that, it’s going to find the data that’s been posted over to Zapier. It already recognized the data coming in.
What Zapier does with this hook is it parses all the values that come in from the JSON. Remember, the JSON can be found in the Sitefinity Documentation. Some of the values you get from the JSON is the user id, user name, form name, etc. The values you see in Zapier are the same values that are identified in the JSON.
The problem with this approach is that all the individual fields that are in the form are part of just one variable or property called Controls. The issue with all of these individual fields being under Controls in Zapier is that if you want to use these values in later steps, it is hard to do because it treats all of the values as just one variable. There are some things you can do in Zapier to separate them out but we found a way that we think works a lot better.
We change the trigger event in Zapier to Catch Raw Hook. If it is a raw hook, then that means you are just getting the raw JSON that is being parsed. In our demo, we go back to our site and fill out the contact form. Now in Zapier, we don’t have those same properties, we just have one property called Raw body.
Setting up a Filter in Zapier
We have multiple forms on our website and we don’t want this zap to fire for every form on our website. We only want it to continue if a specific form is filled out on our site, our contact us form. To make sure our zap only continues when someone fills out our contact us form, we need to set up a filter for our next step. We choose the Filter by Zapier.
Setting up Filter to Only Continue with a Specific Web Form
When you begin the next steps, you will start to see that data is being pulled in. In our example, we choose raw body because it has the raw JSON from the form submission data that came over. We set a condition of only if the text contains sf_contact. We added sf_contact because that is the name of our form. So now the steps will only continue if someone fills out our contact form and won’t continue if any other form on our website is filled out and submitted.
Separating Out Values in Raw Body JSON in Zapier
Since we have all of the code (JSON) in one raw body variable we still can’t use the individual values or properties for other steps in our Zap. (Starts at 13:32) To separate out those values, we can add a Code step in Zapier to run Javascript or Python right inside the step. In our demo, we chose to run Javascript. When customizing the JavaScript, we first write in the Input Data field with the "response" and then tell it to use the raw hook/raw body. So from step 1, it’s pulling in the raw body and it’s putting it in a variable called "response".
We then add some JavaScript that was written ahead of time. It’s going to run this JavaScript that parses the JSON, finds the controls that are part of the control collection, and then it’s only going to keep from that the field control name and the field values. We then use a JavaScript function that will reduce that data and reduce an array to an object and will return it so we can use it inside of our Zap. If that doesn’t make sense to you, that is fine, you really don’t need to understand all the details. All you really need to know is this is a way to separate out to values in the JSON so Zapier can use the data in later steps in your zap.
After you click continue, you should go ahead and test and review to make sure the Javascript is working the way it should. If it is working correctly, you will see some nice structured data you can use in the following steps.
After completing these three steps in Zapier, you now have everything you need to start building zaps that will integrate with another system. In those first three steps, you have captured the data, parsed the data, and you can submit it to whatever 3rd party system you are integrating with.
How to Add a HubSpot Contact Using Automation
The first thing you will need is a HubSpot account. In this demo, we are using a free HubSpot CRM account. (Starting at 16:35) Next, you will integrate Zapier with HubSpot. Integrating your HubSpot account with Zapier is really simple. In your Zap step, search for the HubSpot app under Choose App. You can then pick an event from HubSpot in the Choose Action Event field. The very first event you can select is Create Contact. You can also automate other actions in HubSpot like updating a contact, create deals, create tickets, and just about everything you can do inside of HubSpot you can create an automation for with Zapier.
The next step is to choose the HubSpot account to connect to and authenticate the account. It is a pretty standard enter username and password authentication process for HubSpot in Zapier. Once authenticated and connected, Zapier is able to read the data and properties from your HubSpot account in real-time.
The great thing about the Zapier connector for HubSpot is it is already able to find a bunch of different HubSpot properties out-of-the-box. In our demo, we go to the HubSpot properties for first name, last name, and email. Because we parsed the values in the JSON, we can now search through the data and insert the correct data field. In the Insert Data field in our zap, we set all three of those values and continue to the next step. When we test and review this step, it is actually going to call HubSpot and create a contact for us automatically. Because we have been running the steps all the way through, it’s going to create the contact in HubSpot that we can then go and check in our HubSpot contact list.
After testing this zap to ensure the contact was added to HubSpot. We will turn it on and go back to our website to fill out the contact form again.
To ensure all your steps are firing correctly in your zap, you can go to Task History. There you will find the task log to find out what has run.
Using Automation to Create a Deal in HubSpot
The next part of our demo goes through how to automate, using Zapier, the process of creating a deal in HubSpot when someone fills out a form on your website.
In Sitefinity, a form to capture user info was created with the last question being, "What type of website work are you looking for?” On the form is a dropdown selection for Sitefinity or Custom .Net Applications to determine the type of work someone is interested in. In HubSpot, it will automatically add the deal with "Company Name" first and then add the type of work selected. When we go back into HubSpot, the deal has been automatically created in our deal dashboard.
Here’s how we were able to create an automation in Zapier which automatically added a deal in HubSpot when someone filled out a form on our website. (Starts at 23.59) The first step in your zap would be to catch a raw hook and only continue if the field name has sf_deal in it, which was the name of our ‘deal form’ on our website. We ran the same JavaScript and created a step for creating a contact in Hubspot just like in our previous example.
The new thing we did in this zap was we created a step for creating a deal in HubSpot. This works similarly to other HubSpot actions. In Zapier, you can customize the deal step by identifying the deal name, the pipeline for the deal, deal stage, etc.
This deal will also associate it with the contact's name in HubSpot, which was the person who filled out the form. We do this by using Zapier steps to find a contact ID and define the association. (Starts at 25:50)
Automatically Adding an Event Registrant to Zoom with Website Forms
In this demo, we also show you how to integrate your web forms and CRM with Zoom so when someone fills out a form on your website, it automatically adds them as a registrant in Zoom using Zapier. What's even better is behind the scene, Zoom will automatically send an email to the registrant with all the meeting information. (Integrating with Zoom starts at 27:51)
Integrating Your Web Forms with JIRA to Automatically Add JIRA Issues
We show how to integrate your website forms with JIRA. (starts at 30:25) The example we give is a form on a website that is meant to report a bug. We want a new issue to be logged to JIRA when someone fills out the form on our website. We can do this with a Zapier automation and the following steps.
All the steps are similar to the previous Zaps we created, but with this one, we added a step called Utilities. Whenever you submit an issue to JIRA, you have to assign a status and in our example, the status is the priority of the issue. The problem we ran into was you can’t just map from the form fields from the priority selection drop-down to JIRA because JIRA has these stored as IDs in the background. So, the Utilities step allowed us to pass this data to JIRA through Zapier.
In Zapier, in the utilities step, we used a lookup table. We pulled in the value of the issue priority from the previous step and used a lookup table so if the user put priority = highest as the selection on the form drop-down, it maps that to a “1” value that JIRA uses to actually set the priority.
There are a few interesting ways to use the lookup function in Zapier for JIRA. We could have used it so that when someone is reporting a bug via our web form, an issue would be added to a specific project that we have set up in JIRA based on the email address.
In the last step for integrating website forms to JIRA, we customize how we want to submit the issue in JIRA using the Zapier settings. We manually set the ‘Project Name’ and ‘Issue Type’ fields in Zapier. You could set up automation for these fields using a lookup table. We then passed in the data for the summary and description. In the priority field, we set it to reference step 4, which was the lookup value.
Automating Processes in DocuSign with Web Forms and Zapier
We discuss how to integrate your website forms with DocuSign. (starts at 34:26) In our example, we show how you can automate the process for a document that is the same document being signed by a lot of your customers.
In our example, we use a Master Services Agreement, which is a standard form filled out by all clients before we begin work. Typically, you would log in to your DocuSign account, upload your document, identify the document fields, and identify who you would like to send the document to for signature.
In this part of our demo, we show you how to automate this process by sending customers to a form on your website where they can request a document. Using Zapier, the data submitted from the web form can be used to automatically fill out a document template in DocuSign and will automatically send it to the user for their signature.
Using Microsoft Cognitive Services and Zapier Automation for Negative Reviews
In the last part of our demo, we show you how to use Zapier to identify negative comments in a web form submission. (starts at 36:47) This may be useful if you are sending out a customer satisfaction survey and you want to take immediate action on negative customer experiences.
The scenario we use is a hotel review. If someone submits a form on your hotel website and they talk negatively about their experience in a comments field like say, “The hotel really had a bad smell, the sheets were wet, the food was terrible. The floor was not clean. I had a bad experience. I hate this place.”
Once the form is submitted, in the background it’s actually running a Microsoft Cognitive Services API and passing that message over to the API to determine if the sentiment for that message was positive or negative. If the review is negative, then it will automatically send an email warning that a negative review has been submitted.
To automate this, we go to Zapier and set up a zap with the same first three steps in previous zaps. In the fourth step, we show how to set up a custom request. The custom request is telling Zapier to do some kind of request for some other API. This is zap automation set up is more advanced than the other zaps we created so to see this step-by-step instruction go to 38:32 of the demo video.
We hope that this demo has given you some tips, ideas, and advice on how to integrate your Sitefinity website with 3rd party tools and also gets you to start experimenting with automation tools like Zapier. Let us know if you have any questions or would like to learn more about how to integrate your Sitefinity CMS with 3rd party applications and take advantage of the power of automation.