The Draftbit Docs

Welcome to the Draftbit documentation. You'll find comprehensive documentation and information to help you start working with Draftbit as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

What is Zapier?

Zapier is an online automation tool that connects applications like Google Sheets, Slack, Gmail, Mailchimp, etc. Using Zapier as a service, you can connect two or more applications to automate repetitive tasks. It also provides Webhooks that allow to send POST data and accept to a specific URL. Using a Webhook, you can connect your Draftbit app to send data to a Zapier workflow.

Connect Zapier to Draftbit

If you do not have a Zapier account, create one here. The initial step is to create a custom Webhook in Zapier. To use a Webhook integration, you have to be on their Pro plan.

Create a trigger in Zapier

  • From your Zapier account, go to the My Zaps page and click the button Create a Zap.
  • It will load the editor to create a Zap.
  • Enter the name of your Zap and click the Webhook to choose the type of the trigger.
  • Then, choose an event. Select Catch Hook option which allows sending POST, PATCH, or GET requests to a Zapier URL. Click Continue.
  • In the Set up trigger section, Zapier provides the Custom Webhook URL. You will need this URL to send POST request from the Draftbit app later.
  • Based on your data, you can send JSON objects to a Zapier URL with a key. The structure of sending the data with an object key (an example shown below), Zapier will only grab the child key(s) from the object.
// Example data in Body sent to Zapier with a "key" to the child object
{
"key": {
    "key1":"value1",
    "key2":"value2"
    }
}

// Child object data received by the Zapier
{
  "key1":"value1",
  "key2":"value2"
}
  • After setting up a key object, click Continue.

Setup steps in Draftbit

To access the API in the Draftbit app, you need to use the Zapier Webhook URL as the Base URL.

In the Draftbit app:

  • Open the Data tab on left-navbar.
  • From the Add a service menu, click on REST API.
  • Enter a name for your REST API.
  • Paste your REST API URL into the Base URL input field.
  • Remove the Content-Type header from the Headers section. This request header field is not allowed by Access-Control-Allow-Headers in preflight response. It stops from posting JSON data from a Web Browser. The Preview mode runs inside a web browser. More information on this is at Zapier Help.
  • Click Save.

Available Zapier Recipes

Add new data from Draftbit

You need to use a component that:

  • accepts user input and
  • has a {{variable}} prop to POST data using Zapier Webhhook URL.

Examples of these include:

The initial step is to create an endpoint:

  • Enter a name for the Endpoint.
  • Change the Method to POST using the drop-down.
  • On the right-hand side of the modal, click the Body Structure tab and insert the request of the body. This will differ depending on the fields you have in your data table.
    The field's value will be the value of the {{variable}} prop in Draftbit. This is generally assigned a default value whenever you add a TextInput component in your Draftbit app. To add it in the Body Structure, it needs to be inside the double curly braces as: {{variable}}. The information regarding this is also given in the Body tab.
  • In the Body tab, you can provide a Test Value for {{variable}}. A Test Value is a temporary value that can be used for variables during development.
  • Click Save.

Below is a general breakdown of what the request will look like. You're about to add multiple fields to a request, make sure you include a comma after each field ,:

// example data with object "key"
{
"key": {
  "firstKey": {{firstField}},
    "secondKey": {{secondField}}
    }
}
  • On the Zapier dashboard, press the button Test Trigger. You will notice that the request is sent successfully. It will show the data object with keys and values of what is being sent from the Draftbit app.

You can add the POST endpoint to submit the data entered in the Draftbit using the TextInput component to enter the value and Touchable or Button component to send the request to the API.

  • On the Touchable component, go to the Interactions tab (the last tab).
  • Click the + to open a drop-down menu in the Action tab and select the option Submit Data.
  • Setup the Submit Data by selecting the Service and the Endpoint.
  • Then add the configuration for body request to be sent by selecting the values for {{firstField}} and {{secondField}} (depending on how many fields you have).

Set up an Action in Zapier for POST request

An action is an event a Zap performs after it starts. The following section is a walk-through example of how you can send data from a Draftbit app to an app like Google Sheets.

  • To set up an action, select an app from the App Event. For this example, we are selecting Google Sheets.
  • Select the Action Event as to what action to perform in the Google Sheets app. For example, select the Action Event Create Spreadsheet row to create a new row in the Spreadsheet. Then, click Continue.
  • Select a Google account where the Spreadsheet is hosted.
  • Select the name of the directory Google Drive where it is stored. Then, select the Spreadsheet and the Worksheet inside it.
  • Make sure your Google Sheet has headers in the first row. In the example below, there are two headers set in the first row.
  • The headers here represent the same key names described in the previous section's data.
  • Depending on the data, it will ask what values to assign to which headers. Assign the keys to the specific headers from the request and then click Continue. Zapier will set up the action event.
  • You can test out the action. Make sure to press Test & Continue and click the button Turn on Zap.

The data row created from the test will show in the Spreadsheet:

Try sending the data from the Draftbit app. Open up the Preview mode, enter the value(s) in TextInput field(s) and then press the Button.

Update data from Draftbit app

The PATCH request is used to update one or many entities in a row by matching a specific field. It accepts similar input components as mentioned in the POST request, and the request is triggered using a Touchable component.

The PATCH request sent to Zapier Webhook URL must contain a field key and value that is used to search which key to update.

The initial step is to create an endpoint:

  • Enter a name for the Endpoint.
  • Change the Method to POST using the drop-down.
  • On the right-hand side of the modal, click the Body Structure tab and insert the request of the body. This will differ depending on the fields you have in your data table.
    The field's value will be the value of the {{variable}} prop in Draftbit. This is generally assigned a default value whenever you add a TextInput component in your Draftbit app. To add it in the Body Structure, it needs to be inside the double curly braces as: {{variable}}. The information regarding this is also given in the Body tab.
  • In the Body tab, you can provide a Test Value for {{variable}}. A Test Value is a temporary value that can be used for variables during development.
  • Click Save.

Below is a general breakdown of what the request will look like. You're about to add multiple fields to a request, make sure you include a comma after each field ,:

// example data with object "key"
{
"key": {
  "firstKey": {{valuetoSearchBy}},
    "secondKey": {{valuetoUpdate}}
    }
}

In the above code snippet, the {{valuetoSearchBy}} is used to search the value. It acts as a unique identifier while searching for the correct key in the end application where the data is saved. The {{valuetoUpdate]} is the actual value that is going to be updated through the PATCH request.

On the Zapier dashboard, press the button Test Trigger. You will notice that the request is sent successfully. It will show the data object with keys and values of what is being sent from the Draftbit app.

Set up an Action in Zapier for POST request

An action is an event a Zap performs after it starts. The following section is a walk-through example of how you can search the specific column and update it from a Draftbit app to an app like Google Sheets.

  • To set up an action, select an app from the App Event. For this example, we are selecting Google Sheets.
  • Select the Action Event Update Spreadsheet Row in Google Sheets to search for a value to update the Spreadsheet from the previous action. Then, click Continue. Do note that, Zapier allows to search a column header based on a value and then update any other column's value related to that column header.
  • Select a Google account where the Spreadsheet is hosted.
  • Select the name of the directory Google Drive where it is stored. Then, select the Spreadsheet and the Worksheet inside it.
  • For Row, click the drop-down menu, select Add a search step for Zapier to create an Action Event Look Spreadsheet Row in Google Sheets to search for a value to update in the Spreadsheet. Go to that event.
  • Select a Google account where the Spreadsheet is hosted.
  • Select the name of the directory Google Drive where it is stored. Then, select the Spreadsheet and the Worksheet inside it.
  • Make sure your Google Sheet has headers in the first row. In the example below, there are two headers set in the first row.
  • The headers here represent the same key names described in the previous section's data structure.
  • Depending on the data, set the Lookup Column value to the title header in the Spreadsheet.
  • Set the Lookup Value to Title: some value coming from the Webhook.
  • Click Continue.
    Click on Restest & Continue to test the Webhook's value and move on to the next step.
  • After the test is successful, Zapier will automatically add the dynamic key under the section Row in Update Spreadsheet Row in Google Sheets.
  • Test the action, and on success, you can click the button Turn on zap to use with the Draftbit app.

Updated about a month ago


Zapier


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.