Written by: Adrian Cojocariu
ActiveCampaign joins the likes of HubSpot and Microsoft Dynamics 365 - Marketing and delivers a powerful combination of integrations to the Umbraco backoffice. This comes in the form of a form picker and rendering component for forms managed within an ActiveCampaign account, and a custom workflow allowing form entries to be mapped to an ActiveCampaign contact record, a contact’s custom fields, or to associate a contact with an existing CRM account. As usual, it’s all open-source and the code is available on GitHub - for CMS and Forms - where you can also provide feedback and raise issues).
If you want to read more about the other CRM integrations or explore their CRM environments, you can have a run through these blog posts:
This release sets the baseline for packages to follow, as the team’s goal will be to focus on Umbraco 10 and above (.NET6+); they will be shipped through NuGet, you can find the two ActiveCampaign packages here and here.
Without further ado, ActiveCampaign integrations require minimum versions of 10.1.0 for Umbraco CMS and Forms; please follow along as we deep dive into the integration specifics.
ActiveCampaign is a series of different marketing applications combined into one user-friendly platform that is designed to cater to the needs of various aspects of a business. As an email marketing and Customer Relationship Management platform, it provides the best tools for small and medium businesses.
Amongst the main features we can mention:
Their mission is to help growing businesses make meaningful connections with their customers by providing a personalized customer experience across all channels, and through the entire customer lifecycle, while having a scalable aggregated data warehouse that supports all types of analytics reports.
The free trial allows you to test the platform for 14 days, with up to 100 contacts and up to 100 email sends. The features available within the trial match the Professional tier of features. You can also use this getting started guide to help you with your next steps in exploring ActiveCampaign ecosystem.
With the ActiveCampaign API, you can sync contact information, view contact information, add contacts to accounts, and select and embed forms into an Umbraco web page. The API is structured around REST, HTTP and JSON and requires a valid API URL and Key. API endpoint URLs are organized around resources, such as contacts and forms.
To obtain your API URL and Key, you will need to go into your private portal and access Settings → Developer section, and you will find the access credentials group like this:
Copy your API URL and Key, paste them into the Umbraco appsettings.json as highlighted in the sections below, and you will be set to go.
This integration provides a form picker and rendering component for forms managed within your ActiveCampaign account, and it is open-sourced and available for review or inspiration here.
With the ActiveCampaign forms, you can collect information from leads and grow your lists; in short, forms are the doors to your contacts database.
To get started with ActiveCampaign forms, please use the following guide as a reference.
Now that you’re ready to use your account forms with Umbraco, please follow these steps to embed your first form.
Once you have retrieved your API URL and Key, you will need to add them to your site’s configuration.
An invalid configuration will be signaled accordingly in the property editor and data type:
Otherwise, a valid setup will look like this:
Rendering the form requires a strongly-typed model that passes the account name and the selected form ID to the custom JS script in the rendering view.
To start using the package, you will need to create a new data type using the ActiveCampaign Form Picker property editor, then add it to your desired content type.
If the API configuration is valid, your ActiveCampaign form resources will be accessible by sending the API Key with the Api-Token header on each request.
The form will be rendered into your Umbraco page following the exact design you’ve added from the ActiveCampaign Form Designer component.
Depending on the customization level of your ActiveCampaign account, there are different methods to integrate and render the forms. The one I’ve used for the Umbraco CMS integration covers all form types and uses simple embed code. This embed code uses JavaScript and any changes you make to your form will appear in your rendered form in real time.
Another option would be to use full embed code, a variant available for inline forms only, that uses CSS and HTML. This means that any changes you make to your ActiveCampaign form will not show up on your rendered form, you will need to re-paste the form code.
But we leave this decision up to you, as the front-end rendering is extendable and you can use your own Razor view.
For front-end rendering, a strongly typed model will be generated by the property value converter, and using the HTML helper available, you will be able to render the form easily.
Just ensure your template has this reference:
@using Umbraco.Cms.Integrations.Crm.ActiveCampaign.Helpers; and assuming your alias is activeCampaignForm render the form using
@Html.RenderActiveCampaignForm(Model.ActiveCampaignForm).
Contacts are the center of activity in ActiveCampaign and represent the people that the owner of an ActiveCampaign account is marketing or selling to. A contact is identified by a unique email address; you can create a contact just with only an email address, no other information is needed.
The default fields for storing information about a contact are:
You can also use custom fields to collect important information for your business. Using custom fields helps you better understand each contact in your account.
We have introduced the Accounts concept, which lets you capture details about the businesses you work with at an account level and keep it all in one place. With Accounts, you will be able to store and track details in account fields and see all contacts associated with a business.
This integration provides a custom workflow allowing form entries to be mapped to an ActiveCampaign contact, a contact’s custom fields, or to associate a contact with an existing account. As usual, the integration is open-sourced and available for review or inspiration here.
For this particular integration, the configuration looks slightly different from the CMS one, as two new properties have been added:
An invalid configuration will prompt the user with an error message
To start using the integration for Umbraco Forms you will need to attach the ActiveCampaign Contacts Workflow to a form, configure the mappings between the contact properties and the form fields, select an account if you want to associate the contacts, and map any contact custom fields.
Custom fields are created in ActiveCampaign by managing the fields of an existing contact.
While setting up the workflow, the list of custom fields will be retrieved from ActiveCampaign and made available for mapping:
If the rule of required fields is not met, then you will not be able to save the workflow.
When a form that has the ActiveCampaign workflow attached is submitted, the contact is looked up by email, if a record is found and the AllowContactUpdate flag is false, the workflow execution will stop and a message logged. Otherwise, the custom fields will be added to the request object and then the contact record will get created or updated. If an account association has been specified, then the created contact will be associated with the account.
Hope you’ve enjoyed this journey into ActiveCampaign with this Umbraco duology for rendering ActiveCampaign forms and updating contacts/accounts. Stay tuned for more integrations for Umbraco products in the near future!
