Your users see their CRM as a home to some of their business's most valuable information: Details on their existing customers, prospects, and leads. But it's not just one static database. To keep their CRM always up-to-date (and automated), your customers might need a little inspiration.
The JavaScript widget is the quickest way to get an embedded Zapier experience up and running—it takes just a few minutes and doesn't require any design resources. It's a powerful solution that benefits your users looking to set up automated workflows quickly and directly from within your product, on your integrations pages, and even throughout your app's onboarding process.
Tool: The JavaScript widget
Resources needed: Your site's CMS manager or an engineer who can embed the JavaScript snippet in the backend.
Estimated time: A couple of hours to customize the widget and carry out procedural tests.
In this post, we'll give you a full rundown of the widget and how it works. We'll also show you how some popular CRM tools are using the JavaScript widget to deliver automation (and inspiration) where users need it most.
How to use the JavaScript widget: embedding and styling options
With one short snippet of JavaScript, you can easily (and dynamically) surface your most popular Zap templates anywhere. All you have to do is configure your widget and then copy the code that Zapier generates for you.
Ready to embed Zapier? Generate your custom widget code here in 30 seconds.
You can display both individual and multiple Zap templates—whether you want to display 10, narrow it to 5, or even showcase 50, the choice is yours. As for styling, the JavaScript widget doesn't require any design resources, but if you think Zapier's custom orange buttons don't fit your app's design, you can use the advanced styling options.
Using a combination of available widget parameters, you can change the Zap template's border, theme, or background and button color to match your brand.
You can also show Zap templates from a specific category or exclude certain apps. For example, in the "Import Leads" area of a CRM, you could show the most popular Zap templates that connect your CRM app with form and lead gen tools.
Then from your user's point of view, they'll be able to:
Set up Zaps inside your product. Users can set up their Zaps from a pop-up window, keeping them inside your product experience.
View the most up-to-date templates automatically. Your Zapier widget will automatically update to show the most popular Zap templates for your product.
Access Zapier use cases where they're looking to find them. The widget presents users with the most popular Zap templates in the most contextual places within your product.
Where to feature your Zap templates
In terms of where you'll feature these Zap templates, the world is your oyster. Although it might help to think about where it makes sense contextually (that is, where your users would expect to connect your app to another tool).
For example, you can embed Zap templates in your product, exactly where your users are looking for integrations, such as in a dedicated integrations section or on your integrations pages. You can also bring your blog to life by adding popular Zapier workflows directly in your blog posts, capturing your users' imagination and sparking inspiration.
Another way to set your users up for success is by adding relevant Zapier use cases into your onboarding emails. By displaying the workflows they need right from the get-go, you can make the user experience as seamless and helpful as possible. And when your users run into roadblocks, you can solve common questions by embedding Zap templates directly into your help documentation, FAQs, and user guides.
A look at CRM tools using the JavaScript widget
Hundreds of Zapier's partners already use the JavaScript widget to dynamically display Zap templates to capture their users' interest. Let's take a look at some examples and the different ways they use the JavaScript widget.
Pipedrive
More than 10% of Pipedrive users rely on Zapier workflows, so Pipedrive makes sure all their users can easily find and tap into the integrations they need. They publish a steady cadence of automation content (55 blog articles and counting) to reach their users and inspire new use cases.
They also create dedicated tutorials for specific Zaps in their knowledge base (so users can find a path forward via Zapier.) Their use of embedded templates brings the use cases to life and gives their readers a headstart when it comes to setting up Zaps.
"Zapier is the #1 most popular integration in Pipedrive's App Marketplace of 200+ apps, with over 10% of our customers having installed it. We actively invest in our partnership with Zapier to better serve the tens of thousands of customers who depend on it to automate tasks and close deals quicker." - Maksim Borissov, Head of Pipedrive's Ecosystem
Tip: Want to embed specific Zap templates instead of the most popular? Copy the Zap ID number from your Zap Templates Dashboard by clicking the gear icon beside a Zap and selecting the Copy ID option. Then, include it in place of 1234 in the text below:
<script type="text/JavaScript" src="https://zapier.com/apps/embed/widget.js?guided_zaps=1234"></script>
Streak
Streak uses the JavaScript widget to dynamically display their five most popular Zap templates directly within their integrations panel. Because they embedded their templates directly inside their UI, their users can access these templates right where they'd expect to set up an integration, helping them at their point of need.
Bigin by Zoho
Bigin displays 10 of their most popular Zap templates directly inside their product, using advanced styling options to match them to their own UI branding. Essentially, they changed the border, background, and button color to match their brand.
Tip: Want to replicate Bigin's experience? Check out the instructions here or take a look at the specific parameters they used:
html_id=zapier_container
button=Use this Zap
services=bigin
limit=10
borderColor=white
buttonColor=%2323ae73
buttonType=outline
backgroundColor=%23f9fbfc
inheritFont=true
Close
Close embeds Zap templates inside detailed help documentation, helping their users solve common problems at their point of need. Close also uses the JavaScript widget inside the app directory, embedding their most popular Zaps on the Zapier directory listing.
"Zapier’s functionality has been a game-changer in lowering customer churn rate. Zapier has revolutionized the way our customers see Close. It has helped us cut our churn rate in half over the last six months because the integration helps us solve customer challenges and meet feature requests more rapidly." - Eric Engoron, Customer Success Engineer at Close.
Salesmate
Salesmate prominently displays the Zapier integration in their app directory (users have to be logged in to view this). Once users click on the Zapier listing, a dynamic list of the app's most popular Zap templates are displayed, powered by the JavaScript widget.
Tip: Simply by including buttonColor=%2357a477 when adapting the widget, Salesmate could change the templates' buttons to match the color of their branding. Read more here.
Ready to start using Zapier's JavaScript widget in your CRM tool? Get started with these easy steps:
Paste the code anywhere
Explore advanced options for these additional features:
Show Zap templates from a specific category
Exclude Zap templates from specific apps
Set the number of templates for display
Select individual templates for display
Set custom border, button, and background colors
Have a Zapier integration? Use our suite of partner embed tools to show your customers how to easily connect their favorite tools with your app.
Want to reduce churn and accelerate growth as an automation tool on Zapier? If you're here to join Zapier's Partner Fast Track program, let us know which embed tool you're planning on using with the form below. That way, we can start unlocking your perks.
