White clock icon

6 minute read

White icon of a heart being ranked



A real-life example of improving automation in the Appcues checkout experience

Push button, make thing happen. Whenever I tell people not in tech what I do for a living, it sounds something like that. In this use case, I’ll share how we made ✨ marketing magic ✨ with Appcues, Slack, and Zapier.

The background:

I was reviewing all our flows and found something we could improve. A modal that popped up when I clicked “Contact Sales” on the trial pricing page. 

screenshot of checkout page with arrow pointing to contact sales button
Our checkout has a hardcoded Contact Sales button that launches an Appcues modal using a permalink. My goal was to update that modal.*

Here’s the modal before I made any updates:

screenshot of a modal that says "ready to make it official? we are too! blurred out is standing by to help you choose the right Appcues plan for your business. Email blurred out to get started. Thank you!
The original modal, launched when someone clicks “Contact Sales” at checkout. My plan was to make it more personal and remove a step or 2.

I love the concept--using a hardcoded (i.e, coded by your engineering team and lives permanently in your product) button to launch an Appcues flow, but there’s more we could do here. I won’t cover setting up a hardcoded button in this use case, so definitely check out our support article if you need more information. 

Plan of action:

Personalization: We use the Appcues <-> Hubspot integration to get the sales owner for that contact, then put in their first name and email address in the modal (the blurred out bit).  Here’s the catch: not every contact has a sales owner. There are scenarios where this modal might have used a fallback or didn’t show someone’s name, and showed something like, “Customer Success team is here to help you”. 

Another catch with personalization--a hardcoded button launches this modal, so we don’t have the same filters we would when we launch a flow automatically with Appcues. This means I can’t filter out people without sales owners, or any other parameters that could break the personalization. I decided to just nix the personalization entirely.

Call to action: In the original modal, the call to action is clicking the sales person’s email address to launch a mailto or copy/pasting into your mail client. mailto: links will be the death of me. I don’t use a desktop mail client and I can’t be bothered to set it up to open in webmail. 🤷  So mailto: had to go. 

Add automated notifications: This flow’s sole purpose is to make it easy for people to get information quickly from sales, so I added a form and a contact button instead of the mailto. I also rigged up automation with Zapier to send a message to a Slack channel so sales people will get these alerts easily. 

And… voila! 

The new modal version. Friendlier, easier to request information, and automated.

How we built it:

Updated creative:

First, I added the image using the “Hero/Header” block. The hero block differs from the regular image or text block in that images go edge to edge automatically, and under your skip button (X). You can also use this block to overlay text on an image, color, or gradient.

I used the hero block to add an edge to edge image. You can also use this block to overlay text on an image, color, or gradient.  

Then, I added a custom emoji as an image. I used negative margins to adjust the header and pop the emoji up over the hero image. 

Updated buttons & added form:

Next, I used the “Large Input” block to add in my form, and a button to send the request and advance to the confirmation modal.

I used “Large Input” to gather any option details and added a button that goes to a confirmation modal to send the request.

Built automation:

There’s a few ways to do this. I’ll show the Zapier way first. We’re using a form in this modal, so I am triggering our zap off the “Form Submitted” action.

The basic workflow for our automation using Zapier built off a form submission trigger.

I added a step to look up a contact and get their Hubspot ID so I could generate a link to the contact in Hubspot, but that’s an optional step. It could easily be a 2 step zap. I also created a new #trial-alerts Slack channel. Some fancy formatting later, and we have a brand new alert for sales and success teams, and an easier way for folks to ask us pricing questions.

This is a real alert! This person didn’t input anything into the input box (our most common response) so the “message” is blank. That’s ok! We only want to know if they need help.

You can do this without Zapier. Using the Slack <-> Appcues integration, pick the channel your form submissions go to, and you’re off to the races. It’s not as customizable as Zapier, but it gives you the essentials. 

Here’s what that looks like:

The form submission using the Appcues <-> Slack integration from the same person shown in the Zapier-powered version.  

Here's the finished product in action!

That’s it! Have questions? Want to share something you’ve built that’s even better? It doesn’t need to win any design awards, I love to see it all! Send me a note at lyla@appcues.com or reach out to me on LinkedIn.

*Note: I blurred out pricing because it is constantly changing, and I don’t want anyone stumbling across this page 2 years from now wondering why they are paying a different amount.
We are always transparent with our pricing--see real, up to date prices on our pricing page or contact your designated Appcues human.