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. 

Here’s the modal before I made any updates:

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! 

‍

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.

‍

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.

‍‍

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.

‍

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.

‍

‍

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:

‍

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.