{"id":21840273,"url":"https://github.com/zapier/visual-builder","last_synced_at":"2025-10-08T08:31:25.589Z","repository":{"id":37790021,"uuid":"163955421","full_name":"zapier/visual-builder","owner":"zapier","description":"Learn how to use Zapier Visual Builder to create new Zapier integrations","archived":false,"fork":false,"pushed_at":"2024-10-18T19:52:28.000Z","size":12200,"stargazers_count":52,"open_issues_count":25,"forks_count":29,"subscribers_count":108,"default_branch":"master","last_synced_at":"2024-11-27T21:31:38.565Z","etag":null,"topics":["documentation","zapier"],"latest_commit_sha":null,"homepage":"https://platform.zapier.com","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zapier.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-03T10:01:23.000Z","updated_at":"2024-11-27T02:16:14.000Z","dependencies_parsed_at":"2023-09-22T06:55:43.349Z","dependency_job_id":"f6c47e3d-6fd3-44e1-a577-eefb9d00b5be","html_url":"https://github.com/zapier/visual-builder","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zapier%2Fvisual-builder","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zapier%2Fvisual-builder/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zapier%2Fvisual-builder/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zapier%2Fvisual-builder/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zapier","download_url":"https://codeload.github.com/zapier/visual-builder/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235694194,"owners_count":19030772,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["documentation","zapier"],"created_at":"2024-11-27T21:25:28.246Z","updated_at":"2025-10-08T08:31:20.067Z","avatar_url":"https://github.com/zapier.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Zapier Platform Docs\n\nDevelop the best [Zapier](https://zapier.com/) integration for your app with Zapier's Platform. You can build [private or public integrations](https://platform.zapier.com/quickstart/private-vs-public-integrations) using either of our developer tools.\n\n## Zapier Platform UI\n\nZapier Platform UI is the easiest way to build new Zapier integrations in an online visual builder without any coding.\n\n- Try Zapier Platform UI: [developer.zapier.com](https://developer.zapier.com/)\n- Build a basic integration with the [Platform UI Quick Start tutorial](https://platform.zapier.com/quickstart/platform-ui-guide)\n\n## Zapier Platform CLI\n\nZapier 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.\n\n- Install Zapier Platform CLI and build a sample integration in the [CLI Quick Start guide](https://platform.zapier.com/quickstart/platform-cli-tutorial)\n- Find detailed info on the Zapier Platform in the [Zapier Platform Schema](https://github.com/zapier/zapier-platform/blob/main/packages/schema/docs/build/schema.md) from our built-in code docs\n- Start quicker with our template [Zapier CLI Example Apps](https://github.com/zapier/zapier-platform/tree/main/example-apps)\n- Learn more in [Zapier's Platform CLI Documentation](https://github.com/zapier/zapier-platform/blob/main/packages/cli/README.md)\n\n## Join the Community\n\nLearn from the Zapier team and other [Zapier platform developers in our community forum](https://community.zapier.com/for-developers-61).\n\n***\n\n## Running Locally\n\nThe Zapier Platform Docs website is built on Ruby and Jekyll. You'll need to make sure to have a few things installed before moving forward:\n\n1. [Ruby 2.2.5+](https://www.ruby-lang.org/en/documentation/installation/)\n1. [Bundler](http://bundler.io/)\n1. [Jekyll 3.7.0+](https://jekyllrb.com/docs/installation/)\n\n**Note:** We recommend using [Ruby Version Manager (rvm)](https://rvm.io/rvm/install) to manage various versions of Ruby.\n\nOnce you've installed Ruby, Bundler and Jekyll you're ready to clone this repo.\n\n```\ngit clone git@github.com:zapier/visual-builder.git\n```\n\nNow you'll want to install all of the dependencies to make this repo run.\n\n```\nbundle install\n```\n\nYou should now have all of the packages installed and are ready to get up an running!\n\n```\nbundle exec jekyll serve\n```\n\nGo to \u003chttp://localhost:4000\u003e in your browser and you'll be viewing a local instance of the Zapier Platform. Now you can make updates to the site and see them change instantly in your browser! :rocket:\n\n:writing_hand: Ready to make some changes? Check out our [contributing guidelines](CONTRIBUTING.md).\n\n* * *\n\n## Adding a new collection (aka a new doc)\n**Please feel free to ask a developer or post in #design for help.**\n\n#### Step 1\nCreate a new folder in the `docs` folder with the format of `_name`. For example:\n\n```\n_updates\n```\n\n#### Step 2\nOpen 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._\n\n```\n  {% include side-nav-item.html title=\"example\" items=site.example section_id=\"example\" current_section=current_section %}\n```\n\n#### Step 3\nOpen 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`:\n\n```\nexample:\n  output: true\n  permalink: /:collection/:name\n```\n\nNext, add this code to the `defaults` section (replacing `example` with your collection name):\n\n```\n- scope:\n    path: \"\"\n    type: \"example\"\n  values:\n    layout: default\n```\n\n## Adding new posts\n\n\n#### Step 1\nOpen 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:\n\n```\n_updates/name.md\n```\n\n#### Step 2\nThis part of the file is called Front Matter:\n\n```\n---\ntitle: name\norder: 1\nlayout: post\nredirect_from: /name/\nsearch_omit: false\n---\n```\n\nHere's what this information means:\n- The `title: name` is what appears on the side bar and top of the browser window.\n- The `order: (number)` determines placement in the left navigation.\n- 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.\n- The `redirect_from:` just put the name of the collection (e.g. _updates).\n- The `search_omit:` toggle tells the Search page whether this page should be excluded from results.\n#### Step 3\nRepeat to add more posts.\n\n* * * \n\n## Adding a new subcategory \nSubcategories help group posts together. Note: we only support subcategories one level deep.\n\n#### Step 1\nUnder a collection, create a new sub-folder:\nFor example:\n\n```\n/_reference\n  /soda-brands (new sub-folder)\n```\n\n#### Step 2\nCreate your posts under the new sub-folder:\n```\n/_reference\n  /soda-brands\n    pepsi.md\n    coke.md\n```\n\n* * *\n\n## Code snippet highlighting\nIf you are using a language that contains curly braces, you will likely need to place {% raw %} and  {% endraw %} tags around your code. [Learn more](https://jekyllrb.com/docs/liquid/tags/#code-snippet-highlighting).\n\n```\nThe subscribe URL which looks something like `{% raw %}https://www.formstack.com/api/v2/form/{% templatetag openvariable %}form_id{% templatetag closevariable %}/webhook.json{% endraw %}`\n```\n\n```\n{% highlight javascript %}\n{% raw %}\nvar Zap = {\n    pre_subscribe: function(bundle) {\n        bundle.request.method = 'POST';\n        bundle.request.headers['Content-Type'] = 'application/x-www-form-urlencoded';\n        bundle.request.data = $.param({\n            url: bundle.subscription_url,\n            append_data: 1\n        });\n        return bundle.request;\n    },\n    post_subscribe: function(bundle) {\n        // must return a json serializable object for use in pre_unsubscribe\n        data = z.JSON.parse(bundle.response.content);\n        // we need this in order to build the {% templatetag openvariable %}webhook_id{% templatetag closevariable %}\n        // in the rest hook unsubscribe url\n        return {webhook_id: data.id};\n    },\n    pre_unsubscribe: function(bundle) {\n        bundle.request.method = 'DELETE';\n        bundle.request.data = null;\n        return bundle.request;\n    },\n};\n{% endraw %}\n{% endhighlight %}\n```\n\n* * *\n\n## Deploying changes to production\n\nChanges merged to master go directly to production.\n\n* * *\n\n## Need help?\n\nPlease feel free to ask a developer or post in #design for help.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzapier%2Fvisual-builder","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzapier%2Fvisual-builder","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzapier%2Fvisual-builder/lists"}