Skip to content
Learn how to use Zapier Visual Builder to create new Zapier integrations (beta)
HTML CSS Ruby
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE
_includes
_layouts
assets
docs
.gitignore
404.html
CNAME
CONTRIBUTING.md
Gemfile
Gemfile.lock
LICENSE.md
README.md
_config.yml
index.md

README.md

Zapier Visual Builder Docs

Zapier Visual Builder

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.

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.

Zapier Legacy Web Builder

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


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 git@github.com: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.

You can’t perform that action at this time.