isabella232 / visual-builder

Learn how to use Zapier Visual Builder to create new Zapier integrations

Zapier Visual Builder Docs

Develop the best Zapier integration for your app with Zapier's Platform UI and CLI

Zapier Platform UI

Zapier Platform UI is the easiest way to build new Zapier integrations in an online visual builder without any coding.

• Try Zapier Platform UI: zapier.com/app/developer
• Build a basic integration with the Platform UI Quick Start tutorial
• Learn more in Zapier's Platform UI Documentation

Zapier Platform CLI

Zapier Platform CLI is the most advanced way to build integrations in your local development environment with your team's source code management and custom testing.

• Install Zapier Platform CLI and build a sample integration in the CLI Quick Start guide
• Learn more in Zapier's Platform CLI Documentation
• Find detailed info on the Zapier Platform in the Zapier Platform Schema from our built-in code docs
• Start quicker with our templates Zapier Example Apps

Zapier Legacy Web Builder

Maintain existing Zapier integrations built with Zapier's original web builder:

• Web Builder Documentation
• Web Builder Scripting
• name Web Builder Apps

---

Running Locally

The Zapier Visual Builder Docs website is built on Ruby and Jekyll. You'll need to make sure to have a few things installed before moving forward:

1. Ruby 2.2.5+
2. Bundler
3. Jekyll 3.7.0+

Note: We recommend using Ruby Version Manager (rvm) to manage various versions of Ruby.

Once you've installed Ruby, Bundler and Jekyll you're ready to clone this repo.

git clone [email protected]:zapier/visual-builder.git

Now you'll want to install all of the dependencies to make this repo run.

bundle install

You should now have all of the packages installed and are ready to get up an running!

bundle exec jekyll serve

Go to 127.0.0.1:4000 in your browser and you'll be viewing a local instance of the Zapier Retreats. Now you can make updates to the site and see them change instantly in your browser! 🚀

✍️ Ready to make some changes? Check out our contributing guidelines.

---

Adding a new collection (aka a new doc)

Please feel free to ask a developer or post in #design for help.

Step 1

Create a new folder in the docs folder with the format of _name. For example:

_updates

Step 2

Open up _includes/side-nav.html and add the following code but replacing example with your new collection name (e.g. updates). Note: the order of the side bar retreat items reflects the order of the code.

  {% include side-nav-item.html title="example" items=site.example section_id="example" current_section=current_section %}

Step 3

Open up _config.yml. Add the following code to collections section (replacing example with your collection name), respecting the order that you used in side-nav:

example:
  output: true
  permalink: /:collection/:name

Next, add this code to the defaults section (replacing example with your collection name):

- scope:
    path: ""
    type: "example"
  values:
    layout: default

Adding new posts

Step 1

Open up the _drafts folder and duplicate the name.md file (which has names of headings, sub-headings, table of contents, etc) and place it inside your new collection (e.g. _updates). So it would look like this:

_updates/name.md

Step 2

This part of the file is called Front Matter:

---
title: name
order: 1
layout: post
redirect_from: /name/
---

Here's what this information means:

• The title: name is what appears on the side bar and top of the browser window.
• The order: (number) determines placement in the left navigation.
• The layout: post is default, but you can add layout: post-toc which will add the table of contents on the right based on the h2 you use.
• The redirect_from: just put the name of the collection (e.g. _updates).

Step 3

Repeat to add more posts.

---

Code snippet highlighting

If you are using a language that contains curly braces, you will likely need to place {% raw %} and {% endraw %} tags around your code. Learn more.

The subscribe URL which looks something like `{% raw %}https://www.formstack.com/api/v2/form/{% templatetag openvariable %}form_id{% templatetag closevariable %}/webhook.json{% endraw %}`

{% highlight javascript %}
{% raw %}
var Zap = {
    pre_subscribe: function(bundle) {
        bundle.request.method = 'POST';
        bundle.request.headers['Content-Type'] = 'application/x-www-form-urlencoded';
        bundle.request.data = $.param({
            url: bundle.subscription_url,
            append_data: 1
        });
        return bundle.request;
    },
    post_subscribe: function(bundle) {
        // must return a json serializable object for use in pre_unsubscribe
        data = z.JSON.parse(bundle.response.content);
        // we need this in order to build the {% templatetag openvariable %}webhook_id{% templatetag closevariable %}
        // in the rest hook unsubscribe url
        return {webhook_id: data.id};
    },
    pre_unsubscribe: function(bundle) {
        bundle.request.method = 'DELETE';
        bundle.request.data = null;
        return bundle.request;
    },
};
{% endraw %}
{% endhighlight %}

---

Deploying changes to production

Changes merged to master go directly to production.

---

Need help?

Please feel free to ask a developer or post in #design for help.