In this guide, you will learn how to use Airtable to automate digital certification process from our previous tutorial.


How to use Airtable to automate authentic digital certificate creation


This is a follow up guide for [How to create authentic digital certificate for your online course.](/blog/how-to-create-authentic-digital-certificate-for-your-online-course)

In this guide, you will learn how to use Airtable to automate the process you learn from the previous guide.

If you're not familiar with Airtable, you should definitely check them out and it is a very capable tool that everyone especially marketers should have in their tool belt.

# How to

## Deploying AWS Lambda Function

In order to generate the signed URL, you need a convenient place to serve the script and to call it through a simple trigger. AWS Lambda function fits the bill.

### Creating Lambda Function

- Create a new lambda function named `secure_signed_image`.
- Paste the following modified code. In this example, the modification is similar to what we had from the previous guide. It is modified to work with AWS lambda function.

```python
    import json
    import hmac
    import hashlib
    import base64

    def base64_encode(string):
        """
        Removes any `=` used as padding from the encoded string.
        """
        encoded = base64.b64encode(string.encode())
        encoded = encoded.rstrip(b'=')
        return encoded

    def generate_url(candidate):
      user_id = ""
      secret_key = ""
      base_id = ""

      modifications = [
        { "name": "text_candidate", "text": candidate }
      ]

      # ensure no spaces in json output
      encoded = json.dumps(modifications, separators=(',', ':'))
      encoded = base64_encode(encoded).decode()

      parameters = "{user_id}+{base_id}+{modifications}".format(user_id=user_id, base_id=base_id, modifications=encoded)

      signature = hmac.new(secret_key.encode(), parameters.encode(), hashlib.sha256).hexdigest()

      url = "https://images.usestencil.com/signed-images/{user_id}/{base_id}.png?modifications={modifications}&s={signature}".format(
          base_id=base_id,
          user_id=user_id,
          modifications=encoded,
          signature=signature
      )

      return url


    def lambda_handler(event, context):
        # we read the name from the query string
        # i.e. https://xxx.amazonaws.com/default/secure_signed_image?name=David
        candidate = event["queryStringParameters"]["name"]

        url = generate_url(candidate)
        resp = {
            "url": url
        }

        return {
            'statusCode': 200,
            'body': json.dumps(resp)
        }
```

### Creating HTTP trigger

We need to set up HTTP trigger so we can call the URL publicly and execute our lambda function. One additional step we need to take care of is to ensure our trigger is proxied to our lambda so we can capture the query string properly.

![](https://gblobscdn.gitbook.com/assets%2F-MYeUDPAhozAcUAcc2Lr%2F-MfWgxxPjRdjVEiMnOxB%2F-MfWhKUS39N3DUQhvLlg%2Fimage.png?alt=media&amp;token=de0985d7-f3af-423b-8488-e33e79a95eb4)

### Video Guide

The following video shows the setup one-by-one.

<Youtube src="https://www.youtube.com/embed/LXTb_bSCZlQ" />

# Airtable as database

We will get our candidates' name from table in Airtable. Airtable needs to be set in certain ways to allow for Integromat integration. We will also use Integromat to help tie everything together.

![](https://gblobscdn.gitbook.com/assets%2F-MYeUDPAhozAcUAcc2Lr%2F-MfXSmNFLkuq5qnzxttC%2F-MfXSyuZsPNH0AZsppAD%2Fimage.png?alt=media&amp;token=bac1a371-b8eb-4c01-b51c-85d049521c3d)

Generated signed URL will be populated into Signed URL column

For this example, we create 3 columns in which 2 columns are text and the last column (Last Modified) is a special Airtable column that tracks the last modified time.

For this particular column, we only set the last modified time when the Name column is updated.

See the video for the process

<Youtube src="https://www.youtube.com/embed/1aD1mOqgbCM" />

# Setting up automation

## Using Integromat

Now that we have launched our function to AWS Lambda and Airtable is ready for integration, we can call the lambda function any time to get back the signed URL.

![](https://blog.usestencil.com/content/images/2021/08/image-16.png)

The workflow basically works like this,

- Airtable module watches for record update (this is why we need the Last Modified column)
- Get the value from the Name column and send a GET request to our lambda function with the name as a query string parameter. We also URL encode it.
- Once we get back the URL, we update the related record with the generated signed URL.

You can work on similar integration with Google Sheet.


Running an online course or training? Offering digital certificates is no longer a difficult task to achieve even for small companies. Add value to your online course or training by offering an authentic digital certificate.


How to create authentic digital certificate for your online course


Often time course participants will receive their certificate of accomplishment digitally and they can link the image of the certificate in their professional social network like LinkedIn.

> Offering digital certificate can add value to your business or course

If you are running these courses, you should highly consider giving out digital certificate to your users. There are few things you need to consider to handle this process.

First, generating the certificate image itself. Then, most importantly ensuring certificate authenticity. Since the image can be doctored digitally, you need to employ your own system to handle certificate validation.

If you think that this is too complicate to handle, *it is*. Fortunately, you're in the right place.

Secure signed URL can help solve these issues and you'll see how this is handled. Of course, in some complicated cases you would still need to roll your own system but for the majority of the time this is sufficient.

# How to

## Design your certificate template

A good certificate design should be simple and show all the relevant course information and user's achievement.

![](https://blog.usestencil.com/content/images/2021/08/image-12.png "AWS-like certificate is a good sample of a concise certificate")

## Creating Signed URL for Image

### 1. Getting the necessary information

You'll need some information that can be retrieved from *Console > Integrations > Secure Signed Image*

![](https://blog.usestencil.com/content/images/2021/08/image-13.png "Information required in the next step")

### 2. Generate signed URL

The section [Basic](https://blog.usestencil.com/@shulhi/s/stencil-api/integrations/secure-signed-image/signed-image) explains how the URL is generated. You can use the Python code provided and modify it based on the information we need. You also need to specify the proper modifications that will be sent to our API.

For example this is the Python code you can use with the certificate template that was created from previous step.

```python
    import json
    import hmac
    import hashlib
    import base64

    def base64_encode(string):
        """
        Removes any `=` used as padding from the encoded string.
        """
        encoded = base64.b64encode(string.encode())
        encoded = encoded.rstrip(b'=')
        return encoded

    def generate_url():
      user_id = "be6a052e-bce8-4c14-8bbb-ea6b6f9941d5"
      secret_key = "secretzzzz"
      base_id = "TEafv3AfNptmzii4zj2jkc"

      modifications = [
        { "name": "text_candidate", "text": "John Wick" }
      ]

      # ensure no spaces in json output
      encoded = json.dumps(modifications, separators=(',', ':'))
      encoded = base64_encode(encoded).decode()

      parameters = "{user_id}+{base_id}+{modifications}".format(user_id=user_id, base_id=base_id, modifications=encoded)

      signature = hmac.new(secret_key.encode(), parameters.encode(), hashlib.sha256).hexdigest()

      url = "https://images.usestencil.com/signed-images/{user_id}/{base_id}.png?modifications={modifications}&s={signature}".format(
          base_id=base_id,
          user_id=user_id,
          modifications=encoded,
          signature=signature
      )
      print(url)

    if __name__ == "__main__":
        generate_url()
```

Running the above code, should give you a similar url like

```text
https://images.usestencil.com/signed-images/be6a052e-bce8-4c14-8bbb-ea6b6f9941d5
 /TEafv3AfNptmzii4zj2jkc.png?modifications=W3sibmFtZSI6InRleHRfY2FuZGlkYXRlIiwidGV4dCI6IkpvaG4gV2ljayJ9XQ
 &s=f69736c6f17cea118a45dc018103694cbde78d89513de977c2fa1c55faf697df
```

**Result**

Visiting the URL gives us the certificate,

![](https://blog.usestencil.com/content/images/2021/08/image-14.png "Signed image with your user's name")

## Determining authenticity

All certificates generated and hot-linked using our CDN can be considered as authentic i.e. all links started with `https://images.usestencil.com/signed-images/...` are authentic.

### Why?

> All images are signed with your secret key. Trying to modify the data will invalidate the signature.

Continue reading to know the details.

Let's break it down. The URL can be broken down to several parts,


- `https://images.usestencil.com/signed-images/be6a052e-bce8-4c14-8bbb-ea6b6f9941d5/TEafv3AfNptmzii4zj2jkc.png`
  This is the base URL
- `modifications=W3sibmFtZSI6InRleHRfY2FuZGlkYXRlIiwidGV4dCI6IkpvaG4gV2ljayJ9XQ`
  Base64 encoded modifications
- `s=f69736c6f17cea118a45dc018103694cbde78d89513de977c2fa1c55faf697df`
  Signature that we use to determine the authenticity of the request


If we decode the base64 modifications, we will get the following output,

```python
    [{"name":"text_candidate","text":"John Wick"}]
```

You might think, "Hey what if I modify the value and encode it back. That should work, right?"

Let's do that. We changed the value to `John the Impostor` and got back the following base64 encoded string.

```python
    [{"name":"text_candidate","text":"John the Impostor"}]

    W3sibmFtZSI6InRleHRfY2FuZGlkYXRlIiwidGV4dCI6IkpvaG4gdGhlIEltcG9zdG9yIn1d
```

Putting everything together we get back,

```text
https://images.usestencil.com/signed-images/be6a052e-bce8-4c14-8bbb-ea6b6f9941d5
  /TEafv3AfNptmzii4zj2jkc.png
  ?modifications=W3sibmFtZSI6InRleHRfY2FuZGlkYXRlIiwidGV4dCI6IkpvaG4gdGhlIEltcG9zdG9yIn1d
  &s=f69736c6f17cea118a45dc018103694cbde78d89513de977c2fa1c55faf697df`
```

Visiting the URL gave us the following image instead,

![](https://blog.usestencil.com/content/images/2021/08/image-15.png "Invalid image")

If you look at the response header, you should see the following header `x-stencil-error: Invalid signature`

The reason is that, the signature doesn't contain the right modifications and thus rejected by our server. By ensuring the image is signed with our secret key, we can ensure image authenticity. Simple, right?

# Further integration

As you can see, we have to run one Python script to generate the link for our certificate. There are few things we can do so that we don't have to run the Python script each time. Here are few options you can explore to do this.

### 1. AWS Lambda

You can modify the Python script as a lambda function that accepts the candidate's name and when run, it will return the generated URL.

You can then combine this with other tools such as Airtable where you can input list of names, and use any automation services like Zapier, Integromat, UiPath and others to run the lambda function when your Airtable rows are added/updated and update the corresponding rows with the generated link.

We have created a guide utilizing AWS Lambda for this. You can find it [here](https://blog.usestencil.com/@shulhi/s/stencil-api/integrations/case-studies/automate-candidates-certificate-generation)

### 2. Airtable

Airtable has scripting ability and you can write a similar script to generate the link.

### 3. Google Sheet

Google Sheet also has scripting ability and you can write a similar script to generate the link.

There are numerous of ways to do this and these are just some of them.



Learn how to automate repetitive infographics designs


How To Automate Infographics Automatically


Infographics are a great way to convey information concisely. It is often overlook by marketers when creating visual marketing assets. Often time when think about visual marketing it revolves around social media posts, commercials, advertisements and others.

> Infographics can increase website traffic by up to 12%. ([One Spot](http://0ca36445185fb449d582-f6ffa6baf5dd4144ff990b4132ba0c4d.r41.cf1.rackcdn.com/Infograhic%20-%20visual%20content%20-%209-17.jpg))

> Infographics and other colorful visuals can increase sales by up to 80%. ([Xerox](https://www.office.xerox.com/latest/COLFS-02UA.PDF))

For example, during this pandemic, a well designed and well thought infographics can do wonders to create awareness.

However, creating infographics can be time consuming process especially if you have to do it regularly - updating daily vaccination rate chart, monthly infection rate and many others.

Fortunately, there are tools we can use to expedite and automate the process. In this demo, you will learn how to create infographics and automate the process - from processing the data, generating the infographics and distributing infographics to our distribution channel such as social media.

# Case study

We are going to create a daily vaccination rate infographics using a real data source. We will utilize AWS Lambda to extract our data, use Stencil to generate the infographics and then use Zapier to tie everything together.

Once everything is set up, you no longer have to do anything. Infographics will be created automatically each day and then posted to Twitter.

# How to

## Preparing our template

![](https://blog.usestencil.com/content/images/2021/08/image-3.png "Our template")

Our template consists of two bar charts and a textbox that we will change based on given data each day.

### 1. Use data editor to create the template

You can either choose to design your own template with bar charts (it's easy!) template or use our preset template.

Once you do that, then copy the following JSON file into the data editor to create the initial data for the chart.

```javascript
    {
      "labels": [
        "Johor",
        "Kedah",
        "Kelantan",
        "Melaka",
        "Negeri Sembilan",
        "Pahang",
        "Perak",
        "Perlis",
        "Pulau Pinang",
        "Sabah",
        "Sarawak",
        "Selangor",
        "Terengganu",
        "W.P. Kuala Lumpur",
        "W.P. Labuan",
        "W.P. Putrajaya"
      ],
      "datasets": [
        {
          "label": "Dose #1",
          "data": [
            100,
            5,
            15,
            100,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0
          ],
          "backgroundColor": "#ffcc00"
        },
        {
          "label": "Dose #2",
          "data": [
            10,
            100,
            150,
            200,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0
          ],
          "backgroundColor": "rgba(187, 153, 224, 1)"
        }
      ]
    }
```

## Getting our data with AWS Lambda

Malaysia's National Covid-​19 Immunisation Programme has open data that is updated daily, [https://github.com/CITF-Malaysia/citf-public](https://github.com/CITF-Malaysia/citf-public).  We are mostly interested in vaccination count by state that is referenced here, [https://github.com/CITF-Malaysia/citf-public/blob/main/vaccination/vax_state.csv](https://github.com/CITF-Malaysia/citf-public/blob/main/vaccination/vax_state.csv).

Our lambda function will read the data, parse the data into a format that Stencil can understand, and send a request to Stencil to generate our infographics based on our template.

```javascript
    from datetime import datetime, timedelta
    import pytz
    import pandas as pd
    import requests as req
    import json

    def make_modification(name, states, dose1, dose2):
        datasets = [ { "data": dose1, "label": "Dose #1" }, { "data": dose2, "label": "Dose #2" } ]

        modification = {
            "name": name,
            "labels": states,
            "datasets": datasets
        }

        return modification

    def run():
        url = "https://raw.githubusercontent.com/CITF-Malaysia/citf-public/main/vaccination/vax_state.csv"

        # Get yesterday's date because data is only available up to yesterday
        kl_timezone = pytz.timezone('Asia/Kuala_Lumpur')
        kl_time_now = datetime.now(kl_timezone)
        kl_time_yesterday = kl_time_now - timedelta(days=1)
        yesterday = kl_time_yesterday.strftime("%Y-%m-%d")

        # read the CSV from the URL
        df = pd.read_csv(url)

        # filter the data only for the date we are interested in
        rows = df.loc[df["date"] == yesterday]

        if not rows.empty:
            # Only get the data that we want to trend
            states = rows["state"].tolist()
            daily_dose1 = rows["dose1_daily"].tolist()
            daily_dose2 = rows["dose2_daily"].tolist()

            cumul_dose1 = rows["dose1_cumul"].tolist()
            cumul_dose2 = rows["dose2_cumul"].tolist()

            # Generate modificatiosn that fit Stencil's API format
            daily_graph = make_modification("bar_graph_daily", states, daily_dose1, daily_dose2)
            cumul_graph = make_modification("bar_graph_cumul", states, cumul_dose1, cumul_dose2)

            text_date = {
                "name": "text_date",
                "text": yesterday
            }
            modifications = [text_date, daily_graph, cumul_graph]

            # Set our Zapier webhook to call once image is generatd
            payload = {
                "template": "3bc487ef-33ad-46b3-a18c-0d57c3825723",
                "modifications": modifications,
                "webhook_url": "your-zapier-webhook"
            }

            headers = {
                "Authorization": "Bearer your-project-api-key",
                "Content-Type": "application/json"
            }

            # Call Stencil's API to generate the image asynchronously
            req.post("https://api.usestencil.com/v1/images", json=payload, headers=headers)


    def lambda_handler(event, context):
        run()

        return {
            'statusCode': 200,
            'body': json.dumps('Request sent')
        }
```

Although the code may look daunting for some users, it is actually pretty straight forward. You could also use any other no-code or low-code tool out there to do this, but in this case a simple Python script should handle the job just fine.

We can now deploy our lambda function and set HTTP trigger for the lambda function. We will need this trigger URL in the next step.                                  
![](https://blog.usestencil.com/content/images/2021/08/image-4.png)

## Automating the workflow

### 1. Schedule task with Zapier

The rest of the steps are straight forward and mostly filling in the details with proper information.

We are going to trigger the lambda function everyday at 7AM including weekends.            

![](https://blog.usestencil.com/content/images/2021/08/image-5.png "Trigger the Zap daily")

![](https://blog.usestencil.com/content/images/2021/08/image-6.png "We provide the Lambda function trigger URL from previous step")

### 2. Distributing infographics with Zapier to Twitter

Our lambda function will call Stencil's API to generate the image. We also setup our payload to include Zapier webhook below. Once image is generated, it will call this webhook.        

![](https://blog.usestencil.com/content/images/2021/08/image-7.png "This is the Zapier's Webhook that we set in our payload in step 2 - Lambda function")

We add another step to parse our JSON payload and assign our output variable to include the link to the image and the date of the data.

![](https://blog.usestencil.com/content/images/2021/08/image-8.png "Zapier's output variable must be a dictionary")

We parse the response we get from Stencil's API to send it to the next step (Twitter)

![](https://blog.usestencil.com/content/images/2021/08/image-9.png "We add date to our message so the message is always unique.")

You're done!

The best part of this all this is that once you set this up, it will run everyday without you having to do anything.

> Recognizing workflow to be automated and applying automation are a great way to recover your time each day

![](https://blog.usestencil.com/content/images/2021/08/image-11.png "Our automated tweet")

## Debugging issues

Sometimes, problems can arise and you need to know where to look. You can view image requests by either clicking on Requests tab or by accessing your template's Console page.

![](https://blog.usestencil.com/content/images/2021/08/image-10.png)

You should be able to see your generated image in the list of requests. If you don't, that means Stencil does not receive your request. Please check your Zap or AWS Lambda function.

You can also see the webhook response in the log.

Twitter Zap can be disabled automatically by Zapier if they think you're sending a duplicate tweet. It is against Twitter's ToC.

If you are more of Integromat user, then the step is similar.


Learn how to build a simple auto generating image web app that calls Stencil API to generate marketing ads from data in Google Sheet.


How To Create Auto Generating Image Web App With Google Sheet


In our previous tutorial, we learned how to turn your sheet data into images by creating a script that calls Stencil API.

However, there was one limitation that we discussed at the end of the tutorial in which you would have to wait for all the images to be generated. Closing the page will stop the image generation process. It would be nice if we can work around this limitation. This tutorial will exactly do that.

You can find the previous tutorial here,

- [How To Send Image Generation API Request With Google Sheet](/blog/how-to-send-image-generation-api-request-with-google-sheet)

# Setting Up Google Sheet

Our setup is exactly the same as our last tutorial. We are going to create an additional column called output that will hold the generated image links.

![](https://blog.usestencil.com/content/images/2021/12/image-1.png "Our sample table setup")

# Deploying Google Sheet As Web App

Similar to our previous tutorial, we are going to write a small script that calls Stencil API to generate image *asynchronously*.

Our script will look very similar to what we had previously but with a little twist. This time around, we are going to deploy our script as a web app. How does it help?

- Deploying your sheet as web app allows you to trigger an action (i.e. script handler) from a given URL.
- We will pass this URL to Stencil. Stencil allows you to specify a webhook that can be triggered when an image is generated.
- When the webhook is called, the script handler will receive the information about the generated image and we will update the sheet accordingly.

![](https://blog.usestencil.com/content/images/2021/12/Peek-2021-12-13-19-59.gif "Deploying as web app")

# Writing App Script

There are two parts to this script.

1. Send image generation request
2. Handle the callback when the webhook is triggered


The process is similar like in our previous tutorial.

![](https://blog.usestencil.com/content/images/2021/11/Peek-2021-11-27-09-13.gif "How to create an App Script")

Here's the modified script.

```javascript
    const API_KEY = ""

    // This is triggered when the webhook is called. Stencil will pass along the response as the payload
    function doPost(e) {
      const body = JSON.parse(e.postData.contents)

      // Get the row from the metadata field that we set when we sent the request
      const row = body.metadata.row

      // Set column 5 (Output) with the image_url value
      let range = SpreadsheetApp.getActiveSheet().getRange(row + 1, 5)
      range.setValue(body.image_url)
    }

    function generateImage() {
      let rows = SpreadsheetApp.getActiveSheet().getDataRange().getValues()

      rows.forEach((row, index) => {
        if (index != 0) {
          let range = SpreadsheetApp.getActiveSheet().getRange(index + 1, 5) // output column
          let title = row[0]
          let description = row[1]
          let image = row[2]
          let price = row[3]

          // NOTE
          // 1. Set the webhook_url with the URL given by Google Sheet Web App
          // 2. Set metadata value to keep our row number so we know which row to update when the webhook is triggered
          let data = {
            'template': 'YOUR_TEMPLATE_ID',
            'modifications': [
              {
                "name": "image",
                "src": image
              },
              {
                "name": "description",
                "text": description
              },
              {
                "name": "price",
                "text": price
              },
              {
                "name": "product",
                "text": title
              }
            ],
            'metadata': {
              'row': index
            },
            'webhook_url': 'https://script.google.com/macros/s/xxxxx/exec'
          }

          let options = {
            'method': 'post',
            'contentType': 'application/json',
            'headers': {
              'Authorization': `Bearer ${API_KEY}`
            },
            'payload': JSON.stringify(data)
          }

          // Call the async image generation
          let result = UrlFetchApp.fetch("https://api.usestencil.com/v1/images",options)
          let json = JSON.parse(result.getContentText())

          range.setValue(json.image_url)

          // sleep so we don't get throttled
          Utilities.sleep(250)
        }
      })
    }
```


# Generating Images Asynchronously

Before we can run the script, we can create a button and assign a script to the button. When clicked it will call the image generation API asynchronously and you don't have to wait for all images to be generated.

![](https://blog.usestencil.com/content/images/2021/12/Peek-2021-11-27-09-23.gif "Creating a button from a drawing")

In fact, you can even close the tab and the output column is still going to be populated with the link to the generated images.

![](https://blog.usestencil.com/content/images/2021/11/Peek-2021-11-27-09-32.gif "Generating your images")

Now you can start automating your marketing assets with Google Sheet!


Learn how to generate image using Airtable integration without ever leaving Airtable. That's right! We will show you how to call Stencil's API to trigger the integration with Airtable Button.


How To Bulk Generate Image Using Airtable Button


In the previous installment of Airtable automation series, we have covered two ways to start generating image with Airtable.

- [Generate image using Stencil native Airtable integration](/blog/how-to-automate-image-generation-using-airtable-button/)
- [Generate image using Airtable button by calling Stencil's image generation API](/blog/how-to-use-airtable-to-automate-image-generation-for-building-visual-marketing-assets/)

Recently, we added a new API that allows you to trigger Airtable integration from the API. That means once you have set up the integration, you can do everything right from Airtable. It really makes thing easy to work with!

> Although this approach requires sending API request to Stencil, it differs slightly with the previous approach. This allows us to generate image for ***all*** the rows within a single request.

So, let's do this!

# What is Airtable Button?

For those who are not familiar with Airtable, Airtable has an interesting field called *Button* where you can make each cell in that field to act as a button. You can assign it to do many things, one of them is running script.
![](https://blog.usestncil.com/content/images/2021/11/image-11.png)

# Generating Image

Generating image with this button requires calling Stencil's API. We can assign the button to run our script to trigger the integration that we have set up. Once the images are generated, they will be populated automatically.

Let's do this one by one.

As usual like in previous tutorials, you need to choose a template that you will be working with and familiarize yourself with the fields that you need to be dynamically changed. For the purpose of this tutorial, we will be using the same template like in the previous tutorials.

> Although this step requires writing some code, it is not hard as you can simply copy the code we provided and it should work out of the box.

# Set up your Airtable

In order to properly integrate with Airtable, there are few things that you need to do. Don't worry it's not complicated at all.

### 1. Get your API key and Base ID

Go to your account settings to retrieve your API Key.

![](https://blog.usestncil.com/content/images/2021/11/Screenshot-from-2021-11-13-18-41-42.png)

To get you base ID, go to your base's documentation page. Look for line "The ID of this base is ..."

![](https://blog.usestncil.com/content/images/2021/11/image-2.png)

### 2. Ensure output column has the right field type

Stencil will populate the output column with the generated images. This column can be named anything but its type must be *attachment*.

![](https://blog.usestncil.com/content/images/2021/11/image.png "Output is our output column")

# Set up Airtable Integration

Once you have both base ID and API key, you can continue to set up Airtable integration in Stencil. Again, this is really easy to do.

## 1. Set Airtable API key to your project

Go to your project's setting page and paste the API key that you have retrieved previously.

![](https://blog.usestncil.com/content/images/2021/11/image-3.png)

## 2. Set up Airtable integration for your template

Go to your project and choose the template that you want to populate with data from Airtable.

To go to Airtable integration section, navigate to Console then under Integrations tab you should see Airtable. Another way to access Airtable integration is by clicking Airtable Integration directly under the additional options (ellipsis).

![](https://blog.usestncil.com/content/images/2021/11/Peek-2021-11-13-19-10.gif "GIF that shows how to access Airtable integration")

Then, create a new action and fill in the rest of the information. Here, you will also need the Base ID from the previous step.

## 3. Map template to Airtable

All you have to do now is map the relevant layers from your template to the corresponding columns from your Airtable.

If there are things that don't need to be replaced, simply leave the input fields empty.

![](https://blog.usestncil.com/content/images/2021/11/image-4.png)

For output field, ensure that your column in Airtable is of type "Attachment" as mentioned in the prerequisite above.

Then, save the action.

## 4. Take note of the action API's endpoint

![](https://blog.usestncil.com/content/images/2021/11/image-12.png)

This is the URL that we will use to trigger the action from our Airtable's script.

# Airtable Button Setup

## 1. Create a button field in Airtable

In your Airtable, simply add a new column with Button type. We will assign our action here to call image generation API in Stencil.

![](https://blog.usestncil.com/content/images/2021/11/image-8.png "When you create the Button field, select Run script.")

## 2. Paste script to call Stencil's API

You should be able to edit your script now. Simply copy the following script. In order for this script to work with your template, you only need these two things changed.

![](https://blog.usestncil.com/content/images/2021/11/image-10.png "API key can be found in project's setting")

1. API Key - Find this in your project's setting
2. Airtable action's API endpoint from previous step

```javascript
    const API_KEY = "YOUR_PROJECT_API_KEY"
    const ENDPOINT = "YOUR_AIRTABLE_ACTION_ENDPOINT"

    // Generate image using our synchronous API
    await fetch(ENDPOINT, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${API_KEY}`
      }
    })
```

As you can see, the the script is very short compared to the one from the previous tutorial. This is because all of the modifications are handled by our Airtable integration setup.

## 3. Run your script

All you have to do now is run your script by clicking *any* of the button. It will generate images for all records.

Image will be populated automatically to your output field specified during your Airtable integration setup which in this case is the Instagram column.

![](https://blog.usestncil.com/content/images/2021/11/ezgif.com-gif-maker--1-.gif)

Also, you will notice that Airtable will throw a warning that the record from button field was not used. Simply ignore this error since we are only using the button to trigger the API.


Learn how to utilize Airtable Button field to call Stencil image generation API. Simple and easy setup guaranteed.


How To Automate Image Generation Using Airtable Button


In our previous tutorial, we learned how to automate image generation using built-in Airtable integration right from Stencil.

Read it here if you like to know more,

- [How To Use Airtable To Automate Image Generation For Building Visual Marketing Assets](/blog/how-to-use-airtable-to-automate-image-generation-for-building-visual-marketing-assets)

Do you also know that you're not only limited to use the integration to pull data from Airtable. In fact, you can use our simple API and Airtable Button field to trigger image generation. In this tutorial, we will do just that.

> Although this step requires writing some code, it is not hard as you can simply copy the code we provided and it should work out of the box.

# What is Airtable Button?

For those who are not familiar with Airtable, Airtable has an interesting field type called a button where you can assign cells in a specific column to act as a button.

![](https://blog.usestencil.com/content/images/2021/11/image-7.png "Button field")

# Generating Image

Generating image with this button requires calling Stencil's API. We can assign the button to run our script to read the values from relevant columns, send the request to Stencil and once the image is generated we can populate specified column with the generated image.

Let's do this one by one.

As usual, before we start we need to have a specific template that we want to use in Stencil. We will use the same template from the previous Airtable tutorial mentioned above.

## 1. Create button and output column

In your Airtable, simply add a new column with Button type. We will assign our action here to call image generation API in Stencil.

![](https://blog.usestencil.com/content/images/2021/11/image-8.png "When you create the Button field, select Run script.")

Then create another attachment column to hold the generated image output.

## 2. Paste script to read Airtable data and call Stencil image generation API

You should be able to edit your scrip nowt. Simply copy the following script. In order for this script to work with your template, you only need these three things changed.

![](https://blog.usestencil.com/content/images/2021/11/image-10.png "API key can be found in project's setting")

1. API Key - Find this in your project's setting
2. Template ID
3. Modifications - Change it to fit your template

```javascript
    const API_KEY = "YOUR_PROJECT_API_KEY"

    let table = base.getTable(cursor.activeTableId)
    let record = await input.recordAsync('Select a record', table)

    var data = {
      "template": "YOUR_TEMPLATE_ID",
      "modifications": [
        {
          "name": "title",
          "text": record.getCellValueAsString('Title')
        },
        {
          "name": "frame_7",
          "src": record.getCellValue('Image')[0].url
        }
      ]
    }

    // Generate image using our synchronous API
    let response = await fetch('https://api.usestencil.com/v1/images/sync', {
      method: 'POST',
      body: JSON.stringify(data),
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${API_KEY}`
      }
    })

    let json = await response.json()

    // Update Output column with our image
    await table.updateRecordAsync(record.id, {
      Output: [{ url: json.image_url }]
    })
```

A synchronous image generation API is used here.

If you're not sure how your modifications should look like, simply go to your template's console. The console page shows all the available modifications for your specific template.

![](https://blog.usestencil.com/content/images/2021/11/image-9.png "Test API console shows all the relevant modifications for your template")

## 3. Run your script

All you have to do now is run your script by clicking on the button for the record that you want the image to be generated.

Image will be populated automatically to your Output field.

![](https://blog.usestencil.com/content/images/2021/11/ezgif.com-gif-maker.gif "GIF showing the image generation process")

# Airtable: Built-in integration vs Button

We recommend using built-in integration whenever possible because it is easier to use without the need to write any code.

If you need to do *everything* inside Airtable, then using Airtable Button to call Stencil image generation API is the way to go. The only downside to this is that it only generates image per record instead of bulk image generation for the whole table.

In the next tutorial, you'll see how you can use our recent Airtable integration's API to bulk generate images just like the built-in integration right from Airtable.


We disect why learning marketing automation can help grow your business.


How Using Marketing Automation Can Be a Gamechanger for Your Business


Do you ever feel like there aren’t enough hours in the day? As a marketer, you probably feel like you spent all day sitting in front of a computer, rushing to meet deadlines and trying to create hundreds of unique marketing assets every month. When you’re busy with these manual tasks, it’s easy to forget other aspects of your business – such as client engagement and strategic planning.

At Stencil, we help you design, automate, and scale your marketing agency. Our software allows you to build image variations quickly for social media platforms, websites, and digital marketing. These Canva-style templates work with our API, meaning you don’t need any prior coding experience to use it.

If you’re a marketing agency looking to boost your productivity and unleash your business’ potential, Stencil and our visual marketing automation service can streamline your workflow and automate your processes. We’re sharing some of the benefits that marketing agencies can enjoy by implementing our innovative Stencil low-code tool.

## More cost and time effective

How long do you spend sitting in front of your computer planning, designing, and making content for clients? Your time is money. If you find yourself spending most of your day making graphics or slides, the chances are that you’re not reaching your maximum potential.

Business leaders [point](https://www.mckinsey.com/business-functions/operations/our-insights/the-imperatives-for-automation-success) to automation as the key to success by freeing up your valuable time and allowing you to focus your time (and money!) on investing in other elements of your business.

## Allows you to automate your processes

The beauty of using a low-code tool like Stencil is that you can automate your systems, meaning you only have to create one template if that’s all you need. Stencil works by automating aspects of the design process to create templates that you can use for your content and clients.

This automating process will improve the productivity levels in your marketing agency, reducing overheads and costs while creating standardized processes to streamline planning and content creation.

## Create content for multiple clients at once

One reason that marketing agencies like to use Stencil is that they can bulk plan their content, working on multiple clients at once by using their templates to speed up the process.

Our low-code tool means that you can incorporate your client’s branding and mission into the Canva-like template to curate their online presence.

You can chick off the holiday season by giving us all some TLC she volunteering to hold our shopping bags.

## Drive organic traffic through high-quality designs.

Driving organic traffic to your client’s platforms with high-quality designs that engage the audience base while encapsulating the company’s ethos and brand identity. Getting consistent results for your clients is a win-win situation – and it couldn’t be easier with Stencil.

---

Are you ready to take your marketing agency to the next level? You can find out more about [Stencil](https://www.usestencil.com/) and our easy-to-use Canva-like templates that free up your time to help you grow your business.


Learn how to automate bulk image generation with data from Airtable without writing a single line of code.


How To Use Airtable To Automate Image Generation For Building Visual Marketing Assets


Airtable is a powerful tool that can help transform your work. Every marketer should learn how to use Airtable to take their workflow to the next level. In this tutorial, we will demonstrate how you can use Airtable to generate visual marketing assets quickly without spending hours doing repetitive and tedious design work.

Stencil has built-in Airtable integration that can work without touching any code at all. It integrates seamlessly into your existing tables with no changes to your table design. This feature is available to all plans including free trial users.

> If you need to bulk create images, we guarantee that this will save your hours of repetitive work.

Let's begin!

# Create a template

Choose a template that is suitable for your marketing needs or create one from scratch. We will be using this as the template for this tutorial.

![](https://blog.usestencil.com/content/images/2021/11/image-5.png)

Our template consists of dynamic image that we will change based on the data we pull from Airtable. Same goes with the title and the rest of the layers.

# Set up your Airtable

In order to properly integrate with Airtable, there are few things that you need to do. Don't worry it's not complicated at all.

### 1. Get your API key and Base ID

Go to your account settings to retrieve your API Key.

![](https://blog.usestencil.com/content/images/2021/11/Screenshot-from-2021-11-13-18-41-42.png)

To get you base ID, go to your base's documentation page. Look for line "The ID of this base is ..."

![](https://blog.usestencil.com/content/images/2021/11/image-2.png)

### 2. Ensure output column has the right field type

Stencil will populate the output column with the generated images. This column can be named anything but its type must be *attachment*.

![](https://blog.usestencil.com/content/images/2021/11/image.png "Output is our output column")

# Set up Airtable Integration

Once you have both base ID and API key, you can continue to set up Airtable integration in Stencil. Again, this is really easy to do.

## 1. Set Airtable API key to your project

Go to your project's setting page and paste the API key that you retrieved previously.

![](https://blog.usestencil.com/content/images/2021/11/image-3.png)

## 2. Set up Airtable integration for your template

Go to your project and choose the template that you want to populate with data from Airtable.

To go to Airtable integration section, navigate to Console then under Integrations tab you should see Airtable. Another way to access Airtable integration by clicking Airtable Integration directly under the additional options (ellipsis).

![](https://blog.usestencil.com/content/images/2021/11/Peek-2021-11-13-19-10.gif "GIF that shows how to access Airtable integration")

Then, create new action and fill in the rest of the information. Here, you will also need the Base ID from previous step.

## 3. Map template to Airtable

All you have to do now is to map the relevant layers from your template to the corresponding columns from your Airtable.

If there things that don't need to be replaced, simply leave the input field empty.

![](https://blog.usestencil.com/content/images/2021/11/image-4.png)

For output field, ensure that your column in Airtable is of type "Attachment" as mentioned in the prerequisite above.

Then, save the action.

## 4. Run your action

All you have to do now is run the action whenever you need to generate your images. By default, Stencil will only generate image for rows that have their output column empty.

![](https://blog.usestencil.com/content/images/2021/11/Peek-2021-11-13-20-52.gif)

Generated images are automatically uploaded to your Airtable.

# Tips and Tricks

## 1. Use view to generate images from multiple templates

![](https://blog.usestencil.com/content/images/2021/11/image-6.png)

You can utilize Airtable view to filter which rows get to be generated.

If you set up one template to use a different view and another template to use a different view, you can generate images with different templates inside the same table.

## 2. Set and forget

You don't have to wait for all images to finish rendering. You can close the tab and do something else. Images are generated in the background and your table will be updated with the generated images.

## 3. Utilize the API

If you are a developer or familiar with how API works, you can trigger the action through our API too. Read more about our [Airtable Endpoint API.](https://docs.usestencil.com/api/endpoints/airtable)

## 4. Use Airtable Automation

Use Airtable Automation to build your workflow. For example, when the images are generated, you can trigger them to upload to social media and more.

## Other resources

- [Learn more about how Stencil can help with workflow automation](https://www.usestencil.com/solutions/workflow-automation)


Learn how to call any API with Google Sheet AppScript. In this tutorial, we will call Stencil API to generate images based on the data we have in our sheet. We will also learn how to create a drawing that acts as button to trigger our script.


How To Send Image Generation API Request With Google Sheet


In our previous Automation Series, we used Airtable in various ways to automate image generation workflow. Although Stencil doesn't have native integration with Google Sheet, this is not an issue at all. You have seen how you can call Stencil's API to generate image with Airtable. You can do the same with Google Sheet.

If you're interested in learning more about our Airtable Automation Series, you can read them here,

- [How To Use Airtable To Automate Image Generation For Building Visual Marketing Assets](/blog/how-to-use-airtable-to-automate-image-generation-for-building-visual-marketing-assets)
- [How To Automate Image Generation Using Airtable Button](/blog/how-to-automate-image-generation-using-airtable-button)
- [How To Bulk Generate Image Using Airtable Button](/blog/how-to-bulk-generate-image-using-airtable-button)

# Google Sheet vs Airtable

Both services provide a similar use case but they are not exactly offering the same features because they both work differently.

Google Sheet can be seen as more traditional spreadsheet like Microsoft Excel. It's geared more towards data processing, number crunching, statistics, etc.

Airtable is similar but with richer elements where fields can be formatted into a richer format like image, button, attachments and more.

Which one to choose? It is totally up to you depending on your use case and needs. Either way you can still use Stencil to handle image generation.

So let's start!

# Setting Up Google Sheet

Setting up Google Sheet to work with Stencil is easy. Once you have your data in your sheet, the only thing left to do is to create additional column as a placeholder for the generated image link. In our table setup below, we created a column called Output.

![](https://blog.usestencil.com/content/images/2021/11/image-13.png "Our table setup in Google Sheet")
Ideally our template should also match the fields that we want to overwrite. For this tutorial, we will be using the template from one of our presets. This template is also available in our free product ads generator.

> Checkout our free product ads generator here [https://www.usestencil.com/demo/ecommerce](https://www.usestencil.com/demo/ecommerce). We have more demos available in our site.

![](https://blog.usestencil.com/content/images/2021/11/image-14.png "Template that we will use")

# Writing Google Sheet App Script

In order to call Stencil API, we are going to write App Script. If you're a developer familiar with JavaScript, you will feel at home. Even if you don't, you can simply copy our code below and make adjustment that fits your table.

## 1. Create your script

To create your first script, click on Extensions > App Script. App Script editor will pop out. For this tutorial, we are going to name our function *generateImage.*

See the GIF below for this process.

![](https://blog.usestencil.com/content/images/2021/11/Peek-2021-11-27-09-13.gif "Create a script for your sheet")

## 2. Paste the following code

What this script does is it calls Stencil API to generate image synchronously and once the image is generated, it will populate the output column with the generated image link.

There are few things that you need to replace in order to get this script running.

- Change the API_KEY
- Change the template id
- Change the modifications to match your template

We have commented the code below with some explanation to help you understand it.

```javascript
    const API_KEY = ""

    function generateImage() {
      let rows = SpreadsheetApp.getActiveSheet().getDataRange().getValues()

      rows.forEach((row, index) => {
        // skip row 0 because it only contains the header
        if (index != 0) {
          // Ouput column is at column 5
          let range = SpreadsheetApp.getActiveSheet().getRange(index + 1, 5)
          // Our data is fro column 0 to column 3
          let title = row[0]
          let description = row[1]
          let image = row[2]
          let price = row[3]

          let data = {
            'template': '0b142d3f-92e0-48ba-9ecf-53b05bbec031',
            'modifications': [
              {
                "name": "image",
                "src": image
              },
              {
                "name": "description",
                "text": description
              },
              {
                "name": "price",
                "text": price
              },
              {
                "name": "product",
                "text": title
              }
            ]
          }

          let options = {
            'method': 'post',
            'contentType': 'application/json',
            'headers': {
              'Authorization': `Bearer ${API_KEY}`
            },
            'payload': JSON.stringify(data)
          }

          let result = UrlFetchApp.fetch("https://api.usestencil.com/v1/images/sync",options)
          let json = JSON.parse(result.getContentText())

          range.setValue(json.image_url)

          // sleep so we don't get throttled
          Utilities.sleep(250)
        }
      })
    }
```


Once that is done we are almost ready to generate our images. We need to add a trigger point to call our function.

## 3. Create a button to trigger the function

Unlike Airtable which has a dedicated Button field, Google Sheet does not have that. Instead, with Google Sheet you can insert a drawing and assign a script to the drawing. So we are going to draw a button and assign our previous script to the button.

When the button is clicked, it will run our function.

![](https://blog.usestencil.com/content/images/2021/11/Peek-2021-11-27-09-23.gif)

## 4. Generate your images

All you have to do now is just click on the button whenever you want to generate your images.

![](https://blog.usestencil.com/content/images/2021/11/Peek-2021-11-27-09-32.gif "Link to the image will be populated back to the Output column")


Now regardless of where you data lies, you can always automate your content creation process.

Since we are using Stencil synchronous image generation API, you need to have the window open and wait until everything is generated.

In fact, this is not necessary if we are using Stencil asynchronous image generation API. In our next series of Google Sheet automation, you will see how we can do that. So stay tune!


Learn how to create chart images from different datasets easily. No code involved.


How To Create Chart Easily


Turning charts to images can be a daunting process. You could use applications like Excel to generate charts but then you'd have to piece together the process of converting the chart into image with another application. If you're a technical users, you might look at plenty of available libraries out there to come up with your own solution. This is a time consuming process with each libraries usually handle data format differently. Then you'd have to repeat the process to generate various charts from different datasets.

In this tutorial we will show you how you can easily create images with charts using tool like [Stencil](https://usestencil.com). The process is as easy as selecting the chart type and importing the relevant data.

Let's get started.

Stencil provides API that you can use to build chart images. Even better, you can use our form builder to create a form that allows you to generate multiple chart images with different datasets without having to redesign your chart each time.

## 1. Designing your template

 The first step is to design your template. For charts, Stencil provides various charting options like line graph, bar graph, pie chart, donuts chart and radar chart.

You have plenty of options to customize each chart.

![](https://blog.usestencil.com/content/images/size/w1600/2022/02/image-3.png "Our template setup with one bar graph")

When designing your template, you can either fill the chart with default datasets or leave it empty. Either way, you will have a choice to replace the datasets in the form.

## 2. Generate your form

Use the form builder to create your form based on the fields that you're interested in.

If you'd like to adjust the datasets from the form, pick the `datasets` field. Datasets field allows user to key in data using our Data Editor that is easy to use like any other spreadsheet tool.

The biggest advantage of using data editor is that you don't need to worry about fitting your data based on certain format. Both form builder and the data editor are designed to use with no code involved.

![](https://blog.usestencil.com/content/images/2022/02/image.png "You can create the form by going to Integrations > Forms for your template of choice")

When you are satisfied, click on Save Changes. This will deploy your form and once your form is deployed, you can adjust the datasets accordingly.

![](https://blog.usestencil.com/content/images/2022/02/image-4.png "Data Editor")

## 3. Embed your form

This step is optional. Your form is hosted automatically by us and you can use this form to generate your image.

![](https://blog.usestencil.com/content/images/2022/02/image-1.png "Hosted form")

There is also an option to embed your form inside your web application or page in case you need to integrate it with your system.

![](https://blog.usestencil.com/content/images/2022/02/image-2.png)

## Demo

Check out our demo below.

<IFrame id="form_f4037f0c-a7d3-4b0f-94fe-43488cba6658" src="https://app.usestencil.com/forms/34aacb1e-a7e4-4b4d-bb64-2bffc3c930a4/f4037f0c-a7d3-4b0f-94fe-43488cba6658?embed=true" />
<NextScript src="https://cdn.usestencil.com/assets/iframeresizer.min.js" />
<NextScriptInline content="window.onload=function(){iFrameResize({heightCalculationMethod: 'lowestElement'}, '#form_f4037f0c-a7d3-4b0f-94fe-43488cba6658')}" />


> Want to explore more automation? Sign up for our free trial at [https://www.usestencil.com](https://www.usestencil.com) and get 50 images free.

Till next time.


We are pleased to announce that we are one of the participating partners for NoCode November organized by the Typedream team.


Stencil Joins No Code November


We are pleased to announce that we are one of the participating partners for [NoCode November](https://typedream.site/nocodenovember) organized by the [Typedream](https://typedream.com/) team.

We are excited to see what can you build using our API.

# Redeem Your Free Quota

Once you sign up for Stencil, you'll get 50 images for free as part of your free trial. We are also giving away **FRE ONE MONTH Basic Plan**. Basic plan has all the features like any other higher tier plan.

Here's how you can claim your free 1 month.

1. Sign up at [https://app.usestencil.com/users/register](https://app.usestencil.com/users/register)
2. Subscribe to Basic Plan
3. Use **`NOCODENOVEMBER`** as the coupon code

> Please note that you will need to cancel your subscription *before 15 December*, otherwise you'll be charged.

# What to build

Unleash your creativity and imagination with our API and other no-code integrations to build your idea. Here are some few cool ideas on what you can build with our API.

### 1. A/B Testing Analytics for Product Ads

You can easily generate product ads using Stencil. On top of that, you can build a platform that allows users to do A/B testing for each of the ad.

Here we built a demo for product ads generator. You can do the same but with additional features.

> Play around with our [Product Ad Generator](https://www.usestencil.com/demo/ecommerce) demo

### 2. Automated Cross-Promotion Tool for Online Store

Marketing is undeniably hard. It's even harder when you have to manage multiple distribution channels. Why not automate it?

Below we show how you can generate Instagram post automatically from Shopify's store catalog. You can take the same idea and polish it even further 🚀

<Youtube src="https://www.youtube.com/embed/SSPHf6IguUQ" />

### 3. Digital Certificate Generator

Online courses are everywhere now and it is increasingly common to see courses issuing digital certificates when the courses are complete.

Why not build a tool in this space that helps with digital certificate creation? Using Stencil's [Secure Signed Image](https://www.usestencil.com/solutions/secure-signed-image) you can issue certificate without worrying how to handle certification authenticity.

### 4. Your idea!

Leverage Stencil to get your idea from ideation phase to reality.  You got this! 💪

> We can't wait to see what you can build this month! Good luck to everyone who's participating in this event.


Marketing Automation Blog

Featured

How to use Airtable to automate authentic digital certificate creation

Tutorials & Guides

More

Articles