5. How To Use Zap Templates#

Zapbook Pages#

The Zapbook is Zapier's directory of apps. Every app has a landing page on it, and users can find all of your published Zap templates there, as well as see a list of your available Triggers and Actions. The Zap templates shown at the top of the list are a function of popularity and usage, helping people find the most useful examples first.

Your Zapbook page URL is in this format: https://zapier.com/apps/todoist/integrations

Every pair of apps also has a Zapbook page automatically. Just follow up your Zapbook link with another app's slug, like this: https://zapier.com/apps/trello/integrations/google-sheets. You're guaranteed a landing page no matter what app, with these, and any Zap templates you have will show up appropriately. Another advantage is that if you don't have a Zap template for that specific app pair, we'll try to show the most similar Zaps you do have.

Embedding Your Zaps#

NEW: Check out our slide deck on leveraging Zapier's embedding tech and its benefits to your app, or get started with our Embedding Generator

There are several advantages to embedding your Zaps on your site/app:

  • Completely customizable presentation of the Zapier experience to fit your app
  • Users can see examples of the most popular use-cases, or the ones you want to recommend, easily
  • People are less likely to give up looking for solutions when these are presented as examples
  • Dynamic Zap lists will keep updating themselves as new Zaps are introduced or fixed
  • You'll start receiving statistics on Zap usage from embedded Zaps - impressions you gain because your Zaps are viewed in other apps

"Since my first day at Unbounce, I’ve heard our customers ask for integrations that would simplify their workflows and automate campaigns across different tools — preferably with no coding! When Zapier launched their Partner API it allowed us to do just that. With one singular experience within the Unbounce builder, our customers can now publish campaigns faster than ever before. We’ve seen the embedded Zapier experience reduce time-to-value for new customers and help realize the ROI with Unbounce much more quickly." - Meagan Sobol, Unbounce

You can embed Zap templates in two ways:

  • Using our Partner API which gives you total control over the look and feel of the Zapier experience inside your app. Read more about the API here.
  • With our Embed widget which allows you to display your Zap templates anywhere with just a small snippet of Javascript. Generate your own Embed Widget snippet with the instructions below or by using our Embed Widget Generator.

Embed Widget Options:#

Generate Dynamic Lists of Zaps - Recommended#

<script src="https://zapier.com/apps/embed/widget.js?services=APP&container=true&limit=10"></script>

  • APP is the name of your service
  • limit=N is the max zaps to show when using the dynamic widget

Additional Options:

  • You can also specify a category of apps to include by using the categories=CATEGORYNAME parameter.
  • You can exclude a category of apps by using categories=-CATEGORYNAME
  • You can exclude specific apps using this formatting: services=-APP,-APP

Generate Static Lists of Zaps:#

<script src="https://zapier.com/apps/embed/widget.js?guided_zaps=XXX,XXX"></script>

  • XXX is a Zap ID. You can get the Zap ID by clicking the cog icon next to your Zap template on your dashboard and clicking "Copy ID".

Additional options for both the dynamic and static versions of the widget:

  • you can use theme=dark if your website has a dark background

Problems with document.write on load?#

Add this parameter with any ID you want: html_id= . Then you'll want to have the embeds inside a div with the same id—this will cause the embeds to load with the div, and not with document.write as they do otherwise. Example:

<div id=foo>
<script src="https://zapier.com/apps/embed/widget.js?services=mailchimp&html_id=foo"></script>
</div>

Need to load templates asynchronously / non-blocking?#

You can load templates asynchronously (without blocking the rest of your page's content) by adding the async attribute and html_id parameter to the script tag.

Note: in order for this to work you must also use the html_id= parameter to tell the widget loader where in the DOM you wish the templates to appear.

<div id="foo"></div>
<script async src="https://zapier.com/apps/embed/widget.js?services=mailchimp&html_id=foo"></script>
<!-- ...other html that will be loaded before the templates... -->

Support for React#

The widget can be used within React by using a class component that dynamically creates a script tag onComponentDidMount and sets the script src to the widget.js URL containing the necessary params. In addition, the URL should contain a html_id param set to the id of an empty child element (div) rendered by the component. The script tag should then be inserted into the DOM by either:

  • Getting the container element by id and appending the script
  • Using a ref={} in the component for a parent element that will contain the script
  • Or, appending the script to the document body.

Support for Angular#

To use the widget within an Angular project we'll simply need to dynamically create and append the embed widget script in a Component's lifecycle hook:

  1. Be sure to save a reference to the component's elementRef.nativeElement in the constructor.
  2. Add a container element with a specific id in your template used in the next step.
  3. In the Component's ngAfterViewInit() lifecycle hook create the script tag dynamically making sure to add the html_id param set to the DOM id of the element created in your template. Then, append the script to the saved reference of the Component's nativeElement.

With an empty <div id="zapierhere"></div> in your Component's template, your Component code might look like this:

export class EmbedComponent {
  constructor(el: ElementRef) {
    this.el = el.nativeElement
  }

  ngAfterViewInit() {
    this.zapierScript = document.createElement('script')
    this.zapierScript.type = 'text/javascript'
    this.zapierScript.src =
      'https://zapier.com/apps/embed/widget.js?services=zapier&html_id=zapierhere'
    this.el.appendChild(this.zapierScript)
  }
}

See a working example of this code here.

Embedded Experience Showcase#

  • Unbounce provides a native-feeling integration experience by letting users set up Zaps, view their active Zaps, and even edit Zaps right from within Unbounce.
  • Facebook lets you search for and configure a Zap from within the Lead Ad Campaign Manager.
  • MeisterTask provides an intuitive, styled interface to search for any MeisterTask Zap template.
  • Trello leverages the Partner API to let the user manage their Zapier experience from their dashboard within Trello.
  • Zoho Connect lets users set up Zaps from within the Zoho Connect app.
  • Eventbrite shows their users their most popular Zap templates to make it easy to export attendees.
  • Typeform presents popular Zap templates to their users when they are setting up their forms and has found it to reduce churn.
  • Help Scout uses Zapier to automatically extend their integrations directory, as well as offering Zapier as a fallback if no direct matches are found.
  • Trainerize offers the best Zap templates for their users by use case.
↑ Was this documentation useful? Yes No
Get Help