Discover how to streamline race bib creation with automation, ensuring a seamless and efficient process for your next event.


How to automate race bibs making


Organizing a race event involves numerous logistical details, from securing the venue to coordinating with various sponsors. While those logistics are crucial, race bibs are an essential component that provides participants with a unique identifier, often doubling as a key memento of the event.

Creating race bibs that are both functional and visually appealing doesn’t need to be a labor-intensive process. By taking advantage of templates and automation, you can efficiently design and produce a consistent set of race bibs for all participants, saving valuable time to focus on other critical aspects of your event.

With tools like Stencil, making and distributing race bibs becomes a streamlined process. In this guide, we’ll explore three different methods for generating customized bibs with minimal effort—from utilizing a free design tool to implementing an end-to-end automated workflow.

Planning a race can be both an exciting and overwhelming experience, especially when it comes to managing logistics such as designing participant bibs. Instead of manually crafting and personalizing each bib, you can automate the process using templates and tools. This guide will show you how to create personalized race bibs for all your participants with ease.

There are solutions that handle everything from bib design, printing and race result tracking. However, depending on your event it might be costly. For example, a race event for school or charity event might not opt for this option as it can cost a lot. For this scenario, a DIY approach might work better and Stencil can definitely helps in this case.

## Step 1: Choose a Bib Design Template

Begin by selecting your race bib design. You can:
- Choose a template from **Canva**, **Adobe Express**, or **Figma**.
- Design your own using tools like **Photoshop** or **Illustrator**.
- Opt for automation-friendly platforms like **Stencil**.

![Race Bib Example](https://usestencil.s3.amazonaws.com/blog/2025-05-18-0ed12561-ffea-4be6-9c8a-e259b4f42738.webp)

The primary function of a race bib is to serve as an identifier for participants, incorporating crucial elements like:

- Participant Numbers: Clearly identified and in large print.
- Event Name and Branding: Ensure consistency with your event’s theme.
- Sponsorship Logos: Display any relevant sponsor information.
- QR Code for Live Tracking: Optionally, include a QR code that links participants to race-tracking apps or result pages.

## Step 2: Prepare Your Participants List

To manage your participants efficiently, keep your list structured to facilitate the race bib creation process. Automating your race bib production can save significant time and ensure consistency across all outputs.

For instance, the QR code on your bib could lead to a personalized page on your event website. Free services such as Google Forms, integrated with Google Sheets, or Airtable working with Airtable Forms, can help manage this information.

Consider including these columns in your participants list:

- Participant Name
- Bib Number
- Team Name (if applicable)

Example:

| Name  | Bib Number | Team Name |
|-------|------------|-----------|
| Alice | 101        | Fast Track|
| Bob   | 102        | Speedsters|

## Step 3: Use an Automation Tool

When it comes to automation, several tools can simplify the race bib creation process:

- **[Airtable](https://airtable.com)**: Excellent for managing participant lists and generating bib numbers for registrants seamlessly.
- **[Stencil](https://usestencil.com)**: Helps generate race bibs with automation capabilities, allowing for easy customization of images or PDFs for printing.
- **[Make](https://make.com)**: Facilitates automation across different tools, processing participant lists, sending data to Stencil for image generation, and emailing bibs or updating lists with images for printing.
- **[Zapier](https://zapier.com)**: Offers similar functionality to Make, often with attractive pricing and a free tier that supports various applications.

## Bringing It All Together

Let’s build our race bib automation system quickly—a process designed to take less than 15 minutes!

### Creating a Participant Form with Airtable

Start by setting up your participants list in Airtable, which will also host your registration form.

Structure your table with these columns:

- **Name**: Single line text type.
- **Bib Number**: Single text type.
- **Category**: Single line text type.
- **Link**: Formula type (we’ll add the formula later).
- **Bib**: Attachment type.

![Airtable Setup](https://usestencil.s3.amazonaws.com/blog/2025-05-25-blog-race-bib-airtable-table.webp)

> The `Bib` column is critical and should be of the `Attachment` type to store generated race bibs.

The `Link` column can be used to generate the invidual link for the race result. We can display the link as a QR code in the bib for users to scan.

In this tutorial, we set the formula as `"https://example.com?bib=" & ENCODE_URL_COMPONENT({Bib Number})`.

### Designing a Race Bib Template with Stencil

Next, we'll create a template with Stencil that will be used for automating race bib generation.

You can either design a template using Stencil from scratch or import an image from tools like Canva if desirable. Register for a free Stencil account if you haven’t done so, then create a new project and template.

Here’s an example that includes elements necessary for race bibs:

![Race Bib Template](https://usestencil.s3.amazonaws.com/blog/2025-05-25-blog-race-bib-template-editor.webp)

When creating the template, ensure that layers are named appropriately. For example, the `number` layer will receive data from the `Bib Number` column in Airtable, and the `qr` layer will link to the participant’s custom race page.

Next, we will setup Airtable integration for Stencil. This allows Stencil to pull in the data from your Airtable and create the bibs for each row in your Airtable table.

### Generating Race Bibs

With your participant list prepared, it's time to generate the race bibs. Set up Airtable integration in Stencil.

You'll need the following information from Airtable:

- **Personal Access Token**: Available from Airtable's Builder Hub at [https://airtable.com/create/tokens](https://airtable.com/create/tokens).
- **Base ID**: Find this in your Base settings or derived from the URL where airtable.com/**appnDvuxxxxxyyzz**, the Base ID is the bold segment.

Configure your Airtable integration within Stencil.

![Airtable Integration Setup](https://usestencil.s3.amazonaws.com/blog/2025-05-25-blog-race-bib-airtable-setup.webp)

> Ensure that your connection is functioning correctly!

Once Stencil can connect to your Airtable, we will want to map the template layers in Stencil to the right columns in Airtable.

### Mapping layers to columns

Map your template layers to Airtable columns: connect the `number` layer with the `Bib Number` column, `qrcode` layer to the `Link` column, `name` layer to the `Name` column, and `category` layer to the `Category` column.

![Field Mapping](https://usestencil.s3.amazonaws.com/blog/2025-05-25-blog-race-bib-map-inputs.webp)

Leave other mappings blank unless they are necessary for customization purposes.

Set the `Bib` column for storing outputs (the `Attachment` type). Opt for PDF for printing, or PNG/JPEG for digital images.

![Output field](https://usestencil.s3.amazonaws.com/blog/2025-05-25-blog-race-bib-output-column.webp)

Save your integration settings and proceed to generate the bibs!

![Generating Race Bibs](https://usestencil.s3.amazonaws.com/blog/2025-05-25-blog-race-bib-run-action.webp)

Execute the action to generate the race bibs, with results uploaded automatically as attachments in Airtable. You can smoothly manage this task while handling other activities.

Returning to your Airtable table, you should find the race bibs attached.

![Bib Results](https://usestencil.s3.amazonaws.com/blog/2025-05-25-blog-race-bib-result-output.webp)

You can now send all the generated bibs to printing services.

## Automating Race Bibs for Businesses

For businesses specializing in race bib production, Stencil offers advanced API capabilities to facilitate programmatic image and PDF generation, drastically cutting down on design time. This functionality is particularly advantageous for companies managing large-scale events with substantial production needs.

With Stencil's API, businesses can automate the entire design process, allowing race bibs to be generated consistently and efficiently without manual input.

> We also provides various other integrations that cater for different usage, you can try one of the demo here: [Race Bib Maker](/create/race-bib)


This guide shows you how to create beautiful, customizable invites with ease, giving you more time to enjoy the big day.


How to automate wedding invitation cards


Organizing a wedding involves managing a multitude of details, from booking the venue to coordinating with vendors. While logistics often take precedence, invitations are a crucial element that sets the tone for the entire event, providing guests with their first impression of the wedding’s theme, style, and overall ambiance.

Crafting beautiful invitations can add a personal touch to your wedding, but it doesn't have to be a labor-intensive task. By leveraging templates and automation, you can efficiently design a cohesive set of invitations for your entire guest list, maintaining consistency while freeing up valuable time for other preparations.

With tools like Stencil, creating and distributing wedding invitations becomes a streamlined process. In this guide, we’ll explore three different methods for generating personalized invites with minimal effort—from using a free design tool to implementing a fully automated workflow.

Planning a wedding can be an exciting yet overwhelming experience, especially when it comes to sending out invitations. Instead of manually designing and personalizing each invite, you can automate the process using templates and tools. This guide will show you how to generate personalized wedding invitations for your entire guest list.

## Step 1: Choose a Design Template

Begin by selecting your wedding invitation design. You can:
- Choose a template from **Canva**, **Adobe Express**, or **Figma**.
- Design your own using tools like **Photoshop** or **Illustrator**.
- Opt for automation-friendly platforms like **Stencil**.

![Wedding Invitation Example](https://marketplace.canva.com/EAFb91IbHjw/1/0/571w/canva-beige-elegance-wedding-invitation-f36FsA5Alsk.jpg)

The primary goal of a wedding invitation is to help you manage the event's capacity effectively. To do this, consider including these key elements:

- Guest Names: Clearly specify the names of the invited guests.
- QR Code for RSVP: Include a QR code that allows guests to RSVP online easily.
- Additional Wedding Details: Provide space for important information like the venue, date, and dress code.

## Step 2: Prepare Your Guest List

To efficiently manage your guest list, it should be stored in a structured format that simplifies the planning process. Incorporating automation into your wedding invitation process can significantly enhance efficiency.

For example, the QR code on your invitation can direct guests to an RSVP form that automatically updates your guest list. There are several free services to facilitate this, such as Google Forms integrated with Google Sheets or Airtable paired with Airtable Forms.

Consider including these columns in your guest list:

- Guest Name
- Meal Preference (if applicable)
- Plus-One (if allowed)

Example:

| Name | Meal Preference | Plus-One |
|-------|----------------|---------|
| John  | Vegetarian | Yes |
| Jane  | Regular | No |

## Step 3: Use an Automation Tool

When it comes to automation, several tools can simplify the wedding invitation process:

- **[Airtable](https://airtable.com)**: Great for managing guest lists and handling RSVPs through Airtable Forms.
- **[Stencil](https://usestencil.com)**: Offers features for generating wedding invitations with automation, allowing you to produce images or PDFs for printing.
- **[Make](https://make.com)**: Enables automation across various tools, processing guest lists, sending data to Stencil for image generation, and emailing invitations or updating guest lists with images for printing.
- **[Zapier](https://zapier.com)**: Similar functionality to Make, but often more cost-effective with a generous free plan.

## Bringing It All Together

Let’s quickly build our wedding invitation automation system, a process that should take less than 15 minutes!

### Creating an RSVP Form with Airtable

First, create your guest list table with Airtable, which will also host your RSVP form.

Structure your table with these columns:

- **Name**: Single line text type.
- **Meal Preference**: Single line text type.
- **Link**: Formula type (we’ll add the formula later).
- **RSVP**: Checkbox type.
- **Plus One**: Checkbox type.
- **Invitation**: Attachment type.

![Airtable Setup](https://usestencil.s3.amazonaws.com/blog/2025-05-06-blog-wedding-airtable-attachment-field.webp)

> The `Invitation` column is crucial and should be of the `Attachment` type to store generated invitation cards.
>
> The `Link` column, set to formula type, supports dynamic RSVP link generation, but we need to create the form first.

Create your form and retrieve the link to populate the RSVP link formula for the `Link` column.

![RSVP Form](https://usestencil.s3.amazonaws.com/blog/2025-05-06-blog-wedding-airtable-rsvp-form.webp)

Update your formula using your form link:

```
"https://airtable.com/appnDvuBP7m5AJzRH/pagJvnOB4Z7cqVln6/form?prefill_Name=" & ENCODE_URL_COMPONENT(Name)
```

This formula creates a prefilled RSVP link for each guest's name from the `Name` column. The QR code on the wedding invite will link to this form.

### Designing a Wedding Invitation Template with Stencil

Next, we'll create a template with Stencil, which will be used to automate the invitation generation.

You can design a template using Stencil or import an image from tools like Canva if preferred.

Register for a free Stencil account if you haven't done so, then create a new project and template.

Here’s a design example that includes all necessary elements for a wedding invitation card:

![Invitation Template](https://usestencil.s3.amazonaws.com/blog/2025-05-04-6f883d18-f0ab-4d06-be85-4d6d0618bbc3.webp)

With this template, we can generate the invitation card by updating its layers with information stored in Airtable.

![Dynamic Fields](https://usestencil.s3.amazonaws.com/blog/2025-05-06-blog-wedding-dynamic-fields.webp)

For instance, the `guest_name` layer will be populated from the `Name` column in Airtable, while the `qr` layer will feature a customized RSVP link.

> Stencil offers various methods for dynamically generating image variations from templates through its API, form widget, and more.

The integration with Make, Zapier, and Airtable will be utilized in this tutorial.

### Generating Invitations

With your guest list prepared, it's time to generate invitations. Set up Airtable integration in Stencil.

You'll need the following from Airtable:

- **Personal Access Token**: Obtain it from Airtable's Builder Hub at [https://airtable.com/create/tokens](https://airtable.com/create/tokens).
- **Base ID**: Found in your Base's settings or derived from the URL. In airtable.com/**appnDvuxxxxxxxxxx**, the Base ID is the bold section.

Configure your Airtable integration in Stencil.

![Airtable Integration Setup](https://usestencil.s3.amazonaws.com/blog/2025-05-06-blog-wedding-airtable-int-base-id-settings.webp)

> Ensure your connection is tested and working correctly!

Map your template layers to Airtable columns: link the `guest_name` layer to the `Name` column and the `qr` layer to the `Link` column.

Leave others blank unless needed; our focus is on these fields.

Set the `Invitation` column for outputs (of the `Attachment` type). Choose PDF for print outputs or PNG/JPEG for images.

![Field Mapping](https://usestencil.s3.amazonaws.com/blog/2025-05-06-blog-wedding-airtable-int-field-mapping.webp)

Save your integration and proceed to generate the invitations!

![Generating Invitations](https://usestencil.s3.amazonaws.com/blog/2025-05-06-blog-wedding-airtable-int-generate.webp)

Execute the action to begin generating, with results automatically uploaded as attachments to Airtable. You can continue your tasks as processing will proceed server-side.

Returning to your Airtable table, you should see invitations attached.

![Invitation Results](https://usestencil.s3.amazonaws.com/blog/2025-05-06-blog-wedding-airtable-int-result.webp)

You can then print or email them to your guests.


Generate flashcards for your studies, kids, students and more. Learn how to generate them quickly in this article.


How to create flashcards in a flash


## What are flashcards?

Flashcards are an effective study aid that consists of small rectangular cards, typically with a question or prompt on one side and the corresponding answer or information on the other side. 

They are widely used to review and reinforce knowledge across various subjects and skills. Flashcards are often employed in a repetitive and interactive manner, allowing learners to test themselves, practice recall, and enhance their memory retention. They can be used individually or in a group setting and are particularly useful for memorizing vocabulary, definitions, equations, historical events, foreign language phrases, and other factual information. 

Flashcards can be physical cards made of paper or electronic, available in various mobile apps and online platforms.

## What size are flashcards?

Standard flashcards are typically sized at 3 x 5 or 5 x 7 inches. There are also larger sizes available for including more information or mini sizes that come on a binder ring. With an online flashcard maker, you can customize your cards to suit your needs.

## Creating flashcards quickly

Creating flashcards is made easier by leveraging the repetitive structure they possess. With the help of Stencil, we can generate flashcards using populated data.

Let's explore how this can be accomplished by creating a flashcard template specifically designed for toddlers. 

> Creating teaching assistant materials can be a time-consuming task, particularly when dealing with repetitive content. Stencil can be a valuable tool in streamlining this process.
>
> If you work in education sector, reach out to us for special education discount.

The template consists of three sections: the alphabet at the top, an image in the middle, and the name of the object at the bottom.

To ensure the image fits perfectly, we have set its fit to Contain. This setting ensures that the attached image is resized proportionally and fits within the bounding box.

![Flashcard Template Example](https://i.ibb.co/hZrVn9v/image.png)

Additionally, Stencil offers support for incorporating a secondary style within the same text component. This feature is beneficial for emphasizing specific words or letters within the content, as demonstrated in the template provided below:

![Secondary Style Example](https://i.ibb.co/dMr56vM/image.png)

Enabling the secondary style and customizing its appearance is as simple as enclosing the targeted text with double brackets, such as `normal [[secondary]]`.

## Generating your first flashcard

Stencil offers various methods to generate images or PDFs based on your specific technical requirements. The simplest approach is to utilize our built-in console, enabling you to generate your initial flashcard directly from the template.

![Console Example](https://i.ibb.co/1Lr0dLq/image.png)

By modifying the request body, you can customize the content of your flashcard. Simply make the desired changes and click on the "Generate" button to initiate the flashcard generation process. While basic knowledge of JSON formatting is required, there are reference tables available to assist you.

Additionally, Stencil provides a user-friendly, block-based form builder specifically designed for generating flashcards. This tool allows you to easily create custom forms to generate your desired flashcard content.

## Generating flashcards in bulk

Initiating the creation of flashcards using the console setup is a straightforward process. Behind the scenes, a request is made to Stencil's public API, utilizing your API key to generate an image based on the template and any modifications you've made.

If you possess scripting or programming knowledge, you can swiftly develop a script to automate this process with your own data. 

However, it is important to note that our API incorporates rate limiting measures, so it's essential to avoid overwhelming the endpoint with excessive requests.

### Using Airtable as a data source

If that's not an option and you're familiar with Airtable, you can populate the data for your flashcards in Airtable and let Stencil handle the rest.

Create a table with the following structure:

1. Alphabet (Text)
2. Word (Text)
3. Image (Attachment)
4. Output (Attachment)

![Airtable Example](https://i.ibb.co/M5JjSJX/image.png)

A few things you need to know from Airtable are:
1. Your API key
2. Your Base ID

These can be easily found in Airtable settings (please refer to Airtable's documentation).

Then, create a new Airtable action from the integration page.

![Airtable Action Example](https://i.ibb.co/gjg3vxZ/image.png)

Once you save your configuration, run the action.

![Running Airtable Action Example](https://i.ibb.co/7RzfHZ9/image.png)

If you go back to your Airtable's table, you can see that flashcards are generated and populated into the "Output" column for each row that has been processed.

This process is done in the background, so you don't have to wait. Just come back to your Airtable's table to see the results.

### Using something else as a data source?

If you have a CSV file, Google Sheet, or something else, you don't have to worry. Stencil provides Make and Zapier integrations. These two alone allow you to connect to more than 1,000+ applications including Google Sheets. 

Both Make and Zapier are also friendly to less technical users as they have a nice user interface to work with to build your desired workflow.

Google Sheet has scripting ability that allows you to write script that can read the rows and create actions that act on those data. We'll write more on this in our next article.


Learn how to simply Open Graph image creation for your Next.js project by incorporating Stencil into your project.


How to set up Open Graph image for your Next.js project


## What is Open Graph image and why do you need one?

The Open Graph image is a specific image associated with a webpage or a piece of content that is used when that content is shared on social media platforms like Facebook, Twitter, LinkedIn, and others. It is part of the Open Graph protocol, which allows websites to control how their content appears when shared.

Here are a few reasons why having an Open Graph image is important:

1. **Visual impression**: When a link is shared on social media, the Open Graph image is displayed alongside the text description. An engaging and relevant image can capture attention, increase click-through rates, and encourage users to interact with the content.

2. **Branding and recognition**: The Open Graph image can include visual elements related to your brand, such as a logo or specific colors. By consistently using a branded image across all shared content, you can reinforce your brand identity and make your content easily recognizable.

3. **Control over the preview**: Without an Open Graph image, social media platforms may choose a random image from your webpage as the preview, which may not accurately represent the content. By specifying an Open Graph image, you have control over which image is used and can ensure it reflects the essence of your content.

4. **Shareability and virality**: An attention-grabbing Open Graph image is more likely to be shared by users, increasing the potential for your content to go viral. Visual content is often more shareable, and a well-designed image can make your link stand out amidst the flood of other content on social media.

## How to set up Open Graph image for Next.js project?

This tutorial demonstrates how to set up Open Graph image for your Next.js project using a sample blog written in Next.js. You can clone the sample blog repository to follow along. 

> **Clone this repo to follow along**
>
> [https://github.com/shadcn/next-contentlayer](https://github.com/shadcn/next-contentlayer)

Demonstrating the use of a blog is helpful as it showcases how to generate Open Graph images dynamically for each blog post. This approach allows for a unique image to be customized for each post.

### Static image vs programmatically generated image

Next.js provides two ways of handling Open Graph images. The first approach is to serve a static image on a particular path specified by Next.js and Next.js will serve this image for _all_ of your contents that match that route.

The second approach is to programmatically generate Open Graph image for each blog post. This allows for better content personalization that matches each blog post.

This tutorial will follow the second approach in generating Open Graph images. We will initially utilize the tools provided by Next.js, and later on explain how Stencil can assist in addressing some of the hurdles that you may face.

Our goal is to create an Open Graph image that contains the title of the post and other design elements.

### 1. Setting up our project

If you have not cloned the repo yet, please do so. First, we need to create a `opengraph-image.js` file containing the necessary function for generating the Open Graph image programmatically as suggested in the Next.js official documentation. 

```javascript
import { ImageResponse } from 'next/server'
 
// Route segment config
export const runtime = 'edge'
 
// Image metadata
export const alt = 'About Acme'
export const size = {
  width: 1200,
  height: 630,
}
 
// Font
const interSemiBold = fetch(
  new URL('./Inter-SemiBold.ttf', import.meta.url)
).then((res) => res.arrayBuffer())
 
export const contentType = 'image/png'
 
// Image generation
export default function Image() {
  return new ImageResponse(
    (
      // ImageResponse JSX element
      <div
        style={{
          fontSize: 128,
          background: 'white',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        About Acme
      </div>
    ),
    // ImageResponse options
    {
      // For convenience, we can re-use the exported Open Graph-image
      // size config to also set the ImageResponse's width and height.
      ...size,
      fonts: [
        {
          name: 'Inter',
          data: await interSemiBold,
          style: 'normal',
          weight: 400,
        },
      ],
    }
  )
}
```

For the sample blog, the `opengraph-image.js` file should be located in `app/posts/[...slug]/openraph-image.js`, given that each blog post requires its unique Open Graph image. If you try to run this by running `npm run dev`, Next.js will throw an error. 

That's a bummer!

It is currently not feasible because of a bug in Next.js. You can view the whole discussion here [https://github.com/vercel/next.js/issues/48162](https://github.com/vercel/next.js/issues/48162). A workaround is provided.

To solve this, we have to create an indirection to generate this image instead of letting Next.js handles this for us. It's a bit more code but this is the only way to do it for now until the bug is fixed.

### 2. Create Open Graph handler

The idea behind the workaround is to create a new handler that generates the Open Graph image for us at a specified path. Then, we need to call this handler from somewhere in order to create the image.

We can do that by exporting `generateMetadata` function in `app/posts/[...slug]/page.tsx` that returns our modified metadata. The metadata will contain the URL to the handler, so that whenever an Open Graph image is requested for a particular path, the Open Graph handler is called.

To create the handler, first, we need to remove `app/posts/[...slug]/opengraph-image.js` that we added in the previous step. This should make our project compiling again.

Then, we are going to create a route handler at `app/opengraph/[...path]/route.js`. Add the following content to the file, essentially it does the same thing as our original `opengraph-image.js` but modified to match the convention for a route handler.

```javascript
import { allPosts } from "contentlayer/generated"
import { ImageResponse } from 'next/server'

// Route segment config
export const runtime = 'edge'
 
// Image metadata
export const alt = 'About Acme'
export const size = {
  width: 1200,
  height: 630,
}
 
export const contentType = 'image/png'

export async function GET(request, { params }) {
  // Find relevant post that matches the slug provided in `params`
  const slug = params.path.join("/")
  const post = allPosts.find((post) => post.slugAsParams === slug)  

  // Create an image with the title of the post
  return new ImageResponse(
      (
        // ImageResponse JSX element
        <div
          style={{
            fontSize: 128,
            background: 'white',
            width: '100%',
            height: '100%',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
          }}
        >
          {post.title}
        </div>
      )
    )
}
```

To test everything is working at this point, you can go to [http://localhost:3000/Open Graph/deploying-next-apps](http://localhost:3000/Open Graph/deploying-next-apps). If everything's working, you should see an image that looks like this.

![](https://i.ibb.co/zNDxL2C/image.png)


### 3. Adjust page handler to return proper metadata

Now that we have confirmed that we can generate Open Graph image from the Open Graph handler that was created in the previous step, we can set the page handler for the blog post to return proper metadata that includes this programmatically generatedd Open Graph image.

To do that, we need to make some adjustment to `app/posts/[...slug]/page.tsx`.

```javascript
export async function generateMetadata({
  params,
}: PostProps): Promise<Metadata> {
  const post = await getPostFromParams(params)

  if (!post) {
    return {}
  }

  const slug = params?.slug?.join("/")
  const title = post.title

  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      images: [
        {
          type: "image/png",
          width: 1200,
          height: 630,
          url: `/opengraph/${slug}`
        }
      ]
    }
  }
}
```

Next.js specifies that we can return a function called `generateMetadata` to override the metadata for each of the relevant blog posts. Here we specify the URL for the Open Graph image. If you notice, the URL for this image is actually our Open Graph handler. Our handler returns an image response, so this should work.

### 4. Design a better template

Unfortunately, the generated Open Graph image that we have produced so far may not be very visually appealing. To find inspiration and improve the image, there are various Open Graph templates available on the internet that you can refer to.

Do take note, however, that for the Next.js ImageResponse, you will need to pass in a React component that Next.js will help to render for you. While this is helpful, there are still limitations on how you can generate the image because not all HTML/CSS features are supported. 

Most of the time, the available supported features are more than enough to handle a simple design for Open Graph image. However, because there is no visual editor to work with, which means that good design will have to be manually coded and tested to ensure that it matches your intended outcome.

> You can read what options are available to use when writing your React component to build the image, [https://nextjs.org/docs/app/api-reference/functions/image-response#supported-css-properties](https://nextjs.org/docs/app/api-reference/functions/image-response#supported-css-properties)

## Simplifying things with Stencil

Implementing the Open Graph image was a fun experience. The Next.js documentation was effective in directing us to the right solution. Despite this, there are still some pain points to consider:

1. Creating an aesthetically pleasing Open Graph image can be challenging without a visual editor.
2. Creating the indirection necessary to make the Open Graph image programmatically functional requires some searching and effort.

Stencil can solve both of these paint points. If you're following along, you can clone the repo again to start from scratch and compare both of these approaches.

### 1. Design Open Graph image using Stencil's template editor

To begin, create a new project and template. If you don't have a Stencil account yet, registration is free and comes with 50 credits that can be used for 50 image generations.

> **What is the standard size for Open Graph image**
>
> As for the standard size for Open Graph images, the recommended dimensions are typically 1200x630. However, services such as Twitter may have different standards.

Our template editor offers a range of layer components at your disposal, including but not limited to custom font options, QR code generation, and additional features not offered by Next.js' built-in Open Graph image support. Most importantly, the visual editor allows for a "what you see is what you get" (WYSIWYG) experience, thus eliminating the need to write code from scratch and saving you time.

![](https://i.ibb.co/HKWdmQJ/image.png "Drag-and-drop template editor with various design choices")

To start, create a new project and then create a new template. If you don't have an account with Stencil, you can register for free and there is 50 credits available for you to try on that is good for 50 image generations.

### 2. Test your design

If you're satisfied with your design, you can test it using our easy to use Test Console. Head over to your project, and click on "Console".

![](https://i.ibb.co/LkM9mdq/image.png "Test API Console for quickly testing your changes")

To the left of the screen, you'll find a table outlining the various modifications that can be made to the existing template. 

This table can serve as a handy reference to see what fields are accessible for editing.

To the right of the screen, you'll find a JSON editor where you can enter your desired modifications. From the dropdown menu, you can select whether you want to generate an image or a PDF file.

For the purposes of this tutorial, we will apply the following modifications to the template. If you are following along, you can copy and paste the provided snippet, ensuring that you adjust the template ID accordingly to match your selected template.


```json
{
  "template": "cc717ef4-f16a-4360-b864-3e28dbe8ef27",
  "modifications": [
    {
      "name": "image",
      "src": "https://images.unsplash.com/photo-1614741118887-7a4ee193a5fa"
    },
    {
      "name": "title",
      "text": "How to set up Open Graph image for your Next.js project"
    },
    {
      "name": "author",
      "text": "SHULHI SAPLI"
    }
  ]
}
```

Once you have made the necessary modifications and are satisfied with the results, simply click "Generate". After a few seconds, you should see the result in the output pane below.

If everything seems good, you can proceed to the next step. Otherwise, make more adjustment to your template.

### 3. Generate query string URL for your template

Head over to you project one more time, and click on the three dots (Kebab menu icon) on the top right of your template. Select "Image URLs".

Here you need to add a new query string parameter that maps to your intended modification. In our case, we would like to create a new query string that will modify the title of our Open Graph template.

![](https://i.ibb.co/QHw4P71/image.png "We've assigned query string 't' to the 'title'")


Now, whenever you go to this link, it will generate an image with the specified title from the query string parameter.

Stencil is smart enough to figure out whether if you have generated the same image as before, if you have, it will pull the image from cache making the image load very fast. We also utilize Amazon Cloudfront CDN, so you don't have to worry about image loading time.

The first image generation takes around 2-3s and your credit is only deducted for the first image generation. 

> **TIPS**
>
> While on average image generation takes 2-3s, it also depends on other factors like how many image layers are used in your template. When you specify image layers with larger size, it takes time to download them and may slow down image generation process.

#### Securing access to your query string

It's worth noting that anyone who can view the image will have the ability to copy the link and adjust the parameter to generate a new image. Unfortunately, this is the nature of how query strings work.

Fortunately, there are two solutions available to tackle this issue:

**1. Signed Images**

Stencil has an additional feature available for creating signed images.

**2. Setting Allowed Origins**

On the Query String Integration page that we previously referenced, it's possible to set the allowed origin to your whitelisted domains. If a domain isn't on the list, it will not be able to access the image. This is particularly helpful if you only want to serve the image from your domain – which is usually the case for Open Graph.

![](https://i.ibb.co/QHw4P71/image.png "This image can only be rendered from usestencil.com domain")

It's essential to keep in mind that this solution isn't entirely secure because determined users can spoof the origin header. However, in our experience, it serves as an effective enough deterrent without requiring a more complicated approach like Signed Images.


### 4. Adjust page handler to return proper metadata

Now in our page handler, `app/posts/[...slug]/page.tsx`, we can update the `generateMetadata` function to use our query string URL instead of the Open Graph handler that we created previously. It should look like this.

```javascript
export async function generateMetadata({
  params,
}: PostProps): Promise<Metadata> {
  const post = await getPostFromParams(params)

  if (!post) {
    return {}
  }

  const slug = params?.slug?.join("/")
  const title = post.title

  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      images: [
        {
          type: "image/png",
          width: 1200,
          height: 630,
          url: `https://images.usestencil.com/qs/../...png?t=${title} `
        }
      ]
    }
  }
}
```

We no longer need the Open Graph handler, and it can be removed.

### Making changes to your template

Using Stencil to create an Open Graph image offers an additional benefit: you can avoid modifying any code whenever you want to make adjustments to your template. This eliminates the need to redeploy your application. 

Instead, you can easily make changes to the template in Stencil using the convenient template editor.

After making changes, you can invalidate Stencil's cache. This ensures that whenever someone shares the link to your page, a fresh image will be generated and cached. However, please note that you may still need to wait for the CDN (Content Delivery Network) to invalidate its cache for the changes to take effect.

![](https://i.ibb.co/Ldfkt1h/image.png "Simply click on Invalidate button to invalidate Stencil's cache")

We hope that this guide is helpful to simplify your Next.js project.


Discover how to generate speaker promotional cards for conferences, online talks, live webinars, and other events while also exploring different methods to quickly automate this process.


How to create speaker promo cards for conference


## What is a speaker promo card? 

A speaker promo card is a valuable marketing tool that is designed to promote a conference speaker and their presentation. This type of card typically features the speaker's photo, name, job title, and information about their speech, including the topic, time, and location. 

## Why do you need it for your conference?

Additionally, the card may include social media links, website links, and contact information for the speaker, helping to further promote their brand and engage with interested attendees. Overall, a speaker promo card is a highly effective way to capture the attention of event attendees and build excitement around a speaker's presentation, leading to a more successful and engaging conference experience.

## Steps to create speaker promo card

### 1. Compile relevant information for your speaker promo card

The information you include in your speaker promo card is critical to its success. The primary goal of the speaker promo card is to market the conference and promote the speakers. The information on the card should include the speakers' name and photo, presentation title, date, time, and location. 

You may also want to include links to social media accounts or websites, as well as contact information for each speake

> **TIPS**
>
> A speaker card serves a multi-purpose function. It not only promotes the conference, but also helps to boost the speaker's credibility. A well-designed speaker card can be a win-win situation for both the conference and speaker, as they both benefit from the increased attention and recognition.

### 2. Create and design your speaker promo card

You have the freedom to use any design software that you are comfortable with to create your speaker card.

However, it is crucial to keep a close eye on each card, especially when designing cards for multiple speakers. Ensuring that all cards have consistent designs and formatting will give your speaker promo cards a more polished and professional look.

![](https://i.ibb.co/qMxNLnb/image-1.webp "Canva templates")

[Canva](https://canva.com) is an excellent and versatile tool for designing various materials. One of its biggest advantages is the extensive collection of templates that you can easily customize and use for your design projects.

### 3. Generate more cards!

Once you have finalized your design, it's time to generate more speaker promo cards. You can edit the existing template and manually make the necessary changes, which is suitable if you're handling a small conference with only 8-10 speakers.

However, suppose you're managing a larger conference for a digital agency. In that case, you may require a more efficient and scalable solution to manage a more extensive list of speakers. Fortunately, we have a great solution for this scenario.

## Speaker promo card automation

### 1. Porting your design from Canva to Stencil

If you already have a template designed in Canva, we can use it with some modification to make it work in Stencil.

For this tutorial purpose, this is the template that we are working on. You can find it here, [https://www.canva.com/p/templates/EAFA-JwaLE4-green-mustard-modern-education/](https://www.canva.com/p/templates/EAFA-JwaLE4-green-mustard-modern-education/).

![](https://i.ibb.co/HrZk7xn/Green-Mustard-Modern-Education.jpg)

To start the customization process, we need to determine which components of the template require changes. 

In this scenario, we want to modify specific details, such as the speaker's name, profile picture, date, and talk title.


We can begin by removing this information from the existing template and preparing to add them back in Stencil's editor. It is essential to ensure that we take note of the fonts, sizes, and colors used in the original design, as we will need to maintain consistency throughout the speaker promo card.

![](https://i.ibb.co/K2RwPdM/Green-Mustard-Modern-Education-1.jpg)

Once this is done, export the template as PNG image. We can then use this image in Stencil.

### 2. Creating template in Stencil

Now, come the fun part where we are going to add all the missing bits that we've removed. 

#### 2.1 Create a new template in Stencil

Create a new template in Stencil, and make sure that dimension matches the original template that we have in Canva. This template has 1080x1080 dimension.

Then, choose the `Image` and resize the layer to cover the whole canvas. You can also use "Layout" options in the right panel to accurately position the layer.

![](https://i.ibb.co/Wy2r654/image.png)

Next, we are going to add the image that we've exported from Canva.

#### 2.2 Add missing texts and profile picture

Now, that we've added the image as the backdrop we can now add all the texts that we can dynamically adjust through API or other various integrations that we support.

> **TIPS**:
>
> You can lock a layer so they can't be moved or adjusted accidentally. We lock the image that we've added just now so we can add texts easily without accidentally moving the image.


Our existing template uses the `Barlow` font, which will be retained when creating the speaker promo cards in Stencil. 

We can add the missing information by selecting the relevant text layer and adjusting the font and layer position as necessary.

When it comes to the talk title, we opt for `Auto-fit` for the `Text Fit` option. This enables the text to automatically resize to fit within the bounding box, based on the chosen font size. The font size is specified as the maximum that the text can be.

We've also added an image for profile picture placeholder. This image placeholder can be changed dynamically too. Once you're done, the template should look similar to this.


![](https://i.ibb.co/JksGyXg/image.png "Texts and image are added")

Pay close attention to the layers' name, this is very important in our next step where we can change these layers dynamically.


#### 2.3 Generate your first image

After you save your changes, it's time to generate your first image. There are various of ways to generate image with Stencil.

We will show you the easiest way to test your image generation. We've provided an API console that acts as an image generator that you can play around with. Go to your list of templates, and click on `Console`.

![](https://i.ibb.co/z4N7Y7x/image.png "API Console")

To the left of the screen, you'll find a table outlining the various modifications that can be made to the existing template. 

This table can serve as a handy reference to see what fields are accessible for editing.

To the right of the screen, you'll find a JSON editor where you can enter your desired modifications. From the dropdown menu, you can select whether you want to generate an image or a PDF file.

For the purposes of this tutorial, we will apply the following modifications to the template. If you are following along, you can copy and paste the provided snippet, ensuring that you adjust the template ID accordingly to match your selected template.


```json
{
  "template": "3a3e61ec-32e1-41ff-bab8-03596d874df4",
  "modifications": [
    {
      "name": "title",
      "text": "How to increase revenue with marketing automation"
    },
    {
      "name": "date",
      "text": "Sunday, 25 June"
    },
    {
      "name": "time",
      "text": "08 AM GMT"
    },
    {
      "name": "speaker",
      "text": "Taylor Lee"
    },
    {
      "name": "profile",
      "src": "https://i.ibb.co/jMBsNMc/image.png"
    }
  ]
}
```

Once you have made the necessary modifications and are satisfied with the results, simply click "Generate". After a few seconds, you should see the result in the output pane below.

You can now choose to either download the image or PDF or view the API response that we provide. Additionally, we enable the option to hotlink the image directly from our CDN.

![](https://i.ibb.co/Rhyx9qp/image.png "Download your ouput")

### 3. Automating speaker promo card creation

As previously mentioned, the above method (API) can be used, or for smaller volumes of speaker promo cards, it's possible to adjust the template manually. However, when dealing with a larger conference and a higher volume of speaker promo cards, automation is highly recommended.

The advantage of automation is the speed with which it can generate speaker promo cards and its ability to minimize the risk of errors. When dealing with numerous cards, it's easy to make mistakes, especially when inputting details such as speaker names. Utilizing automation technology removes these errors and ultimately, ensures a more efficient and error-free process.

Nobody likes getting their name wrong on this sort of stuff!

#### 3.1 Zapier and Make integrations

Stencil comes with both Zapier and Make integrations available to use. This opens up thousand of possibilities for you to connect Stencil to various other automation workflows.

For an example, you can have your list of speakers and their details stored in Google Sheets and set up automation workflow for Zapier/Make to read from the sheets and generate the relevant cards based on these data.

![](https://i.ibb.co/F08md7Y/image.png)

If you're interested to learn more on how to use Zapier with Stencil, we have a separate tutorial that you can read here - [https://www.usestencil.com/blog/how-to-use-zapier-to-create-a-pdf](https://www.usestencil.com/blog/how-to-use-zapier-to-create-a-pdf).

#### 3.2 Airtable integration

Stencil also comes with built-in Airtable integration. This allows you automate image generation like creating this speaker promo card using data stored in Airtable.


<video autoPlay={true} loop={true} muted={true} style={{marginTop: '15px'}}>
    <source src="/videos/airtable-integration.mp4" type_="video/mp4" />
</video>


Setting up this integration only requires a few simple steps. We have a thorough tutorial on Airtable integration that you can check out here - [https://www.usestencil.com/blog/how-to-use-airtable-to-automate-image-generation-for-building-visual-marketing-assets](https://www.usestencil.com/blog/how-to-use-airtable-to-automate-image-generation-for-building-visual-marketing-assets).

#### 3.3 RESTful Image and PDF Generation API

If you have access to a technical team that can build integration for your application using our provided API for image and PDF generation, then this is the most flexible approach to take.

> **TIPS**
> 
> The API console that you used to generate your first image is an example of this integration that we built. Behind the scene, it calls the same API to generate those speaker card for you.

The API is designed to be easy to use, and it supports triggering a webhook whenever an image or a PDF finished generating. The documentation is available here - [https://docs.usestencil.com/api/endpoints/image](https://docs.usestencil.com/api/endpoints/image).

#### 3.4 More integrations

This tutorial does not cover all of the integrations offered by Stencil. However, please feel free to explore them. Majority of these integrations are either low-code or no-code, making them easily accessible for ordinary non-technical users.


Learn what it takes to create an event ticket. We also show you some tricks on how to automate them with Stencil.


How to generate shipping labels with API



Are you interested in building a shipping label API but struggling to find a simple solution for generating shipping labels? This tutorial will guide you through leveraging Stencil's powerful image and PDF generation API to create shipping labels with ease. 

Whether you're a developer or small business owner looking to automate shipping label generation, Stencil has got you covered with its simple and user-friendly system. Say goodbye to the complicated and time-consuming process of shipping label creation.


## What is Shipping Label API?

A shipping label API is an interface that allows software developers or technical users to generate shipping labels programmatically. 

If you're looking for a simple solution, you can directly use Stencil to customize shipping label template using our editor and use our various integrations to generate your shipping label. 

You can also build a much more complex solution to shipping label, and leave the shipping label generation to Stencil. Stencil can generate both image or PDF depending on your needs.

For example, if you run a Shopify store, you can use shipping label API to automatically generate shipping label whenever an order is received.

## Steps to Build a Shipping Label API using Stencil

### Step 1: Create Your Account
Go to our website and sign up for an account. You will receive a confirmation email, click on the activation link and login to Stencil with your account.

#### Step 2: Define Your Template
Decide on the shipping label's template or design that you want to display. Choose the font, colors, and layout for the shipping label. It should include all the necessary information needed to complete a shipment for the delivery company.

![](https://pbs.twimg.com/media/FvIIVJqacAABDoF?format=png&name=medium)

Depending on the shipping carriers, you need to abide by the format that they require. Different shipping carriers may require different dimension than our example shipping label.

> **What is standard shipping label format?**
>
> 4 x 6 inches
>
> The standard size of shipping labels is 4 x 6 inches (10 x 15cm). If this doesn't fit your package, then other standards are 6 x 3 inches (15 x 7cm) and 4 x 4 inches (10 x 10cm).

### Step 3: Use Our APIs

Stencil provides both image and PDF formats that you can choose from, and both are accessible through our API.

Of course, you can also build your own solution by directly leveraging our image and PDF generation API. Simply call the API with the desired changes, and the label will be generated accordingly.

Below is an example of how to use the API; you can easily adapt this code based on your preferred language.

```javascript
const data = {
  "template": `${TEMPLATE_ID}`,
  "modifications": [
    {
      "name": "recipient_name",
      "src": "Amanda William"
    },
    {
      "name": "recipient_address",
      "text": "Quay Residences\n132 Next Street"
    },
    {
      "name": "tracking_number",
      "text": "DX-1245"
    },
    {
      "name": "barcode",
      "text": "1234567890128"
    }
  ]
}

fetch('https://api.usestencil.com/v1/pdfs', {
  method: 'POST',
  body: JSON.stringify(data),
  headers: {
    'Content-Type' : 'application/json',
    'Authorization' : `Bearer ${API_KEY}`
  }
})
```

#### Other integration example: Embeddable form

In addition to the integration with Zapier, Make, and Airtable, Stencil offers a range of versatile integrations to help you streamline and automate the label generation process. With these external tools, generating labels in bulk has never been easier.

To further simplify the process, Stencil offers an embeddable form that can be customized to suit your needs. 

Below is an example of embeddable form that you can create in Stencil. Simply click "Generate Image" or "Generate PDF" to create high-quality labels in seconds. Give the demo below a try.

<IFrame id="form_1f70bdfc-1d0a-476d-8cde-1fae6be1f8b7" style="width: 1px; border: none; min-width: 100%; display: block; min-height: 600px" src="https://app.usestencil.com/forms/34aacb1e-a7e4-4b4d-bb64-2bffc3c930a4/1f70bdfc-1d0a-476d-8cde-1fae6be1f8b7?embed=true" />
<NextScript src="https://cdn.usestencil.com/assets/iframeresizer.min.js" />
<NextScriptInline content="window.onload=function(){iFrameResize({heightCalculationMethod: 'lowestElement'}, '#form_1f70bdfc-1d0a-476d-8cde-1fae6be1f8b7')}" />

            

This is an ideal solution for those utilizing CMS platforms, such as WordPress, Drupal, Joomla, Magento, and more. Stencil's embeddable form can be easily incorporated into your CMS with minimal effort. 


### Step 4: Enhance the Shipping Label's Functionality

Creating shipping labels involves more than just generating and printing them; handling shipping, especially international shipments, can be daunting.

With Stencil, you can rest assured that the label generation process will be taken care of properly. No need to worry about creating a label editor - just use Stencil's template editor instead.

This frees up your time to focus on the core aspects of the shipment process, such as handling invoices and taxes, connecting with carriers, and more. Additionally, you can enhance the functionality of your shipping labels by implementing features such as barcode and tracking number integration, support for multiple languages, and tax information.

> **What information should I include in the shipping label QR code?**
>
>  A QR code can contain a consignment note, a link to your website or other relevant information.

### Why you should consider automating shipping label creation?

Automation can offer numerous benefits, particularly when it comes to repetitive and error-prone tasks such as shipping label creation.

Through the use of Stencil's programmatic and no-code image and PDF generation capabilities, you can greatly reduce the time and cost required to develop a custom shipping label solution from scratch.

Additionally, automation can help eliminate human errors such as incorrectly entering addresses, which is one of the most common mistakes made when handling shipments.


Streamline your ticket creation process: A guide to creating and automating event tickets


Event tickets are a crucial component of any event planning process. A well-designed ticket can create a lasting impression on attendees and leave them excited about the event. However, designing event tickets from scratch can be time-consuming and requires expertise in graphic design. 

This is where Stencil comes in handy. By using Stencil, you can create professional-looking event tickets quickly and easily.

In this article, we will take a step-by-step approach to creating event tickets using Stencil.

## Step 1: Beautifully craft your event ticket template

To create your event ticket, start by designing a template that matches the theme of your event. If you don't have a designer, you can find inspiration online.

Next, add important details such as the event name, date, time, location, and any other relevant information. Incorporate high-quality images and graphics that align with your brand or event theme. You can find free, high-quality images that are royalty-free to use from sources such as Unsplash or Pexels.

Lastly, choose a font that is easy to read and consistent throughout the ticket. This will ensure that all information is clear and legible.

> **What size is an event ticket?**
>
> The standard size for raffle tickets with stubs is 5.63” x 1.97”.
> The standard size for event tickets with stubs	1.97" x 5.63".
> The stubless ticket	with 5.5" x 2.125".
>
> However, you don't have to follow these standard size if you don't want to. Pick a size that matches your event intention and design.

![](https://cdn.usestencil.com/images/245ba1b0-7974-4aa4-8955-f73a72fa4f90/b5ac259d-6577-403c-ae84-e4bad38d1862.jpeg "Standard size ticket with stub")

For this example, we have designed a simple template for an art festival. 

## Step 2: Add QR code or barcode 

Including a QR code or barcode on your event ticket is a great way to give attendees additional access to event-related information and facilitate social media connections. With the help of Stencil's easy-to-use features, adding a QR code or barcode to your ticket design is a simple process.

Typically, a QR code is used to provide external links for additional event details, while a barcode is used to verify ticket validity when scanned at the venue.

![](https://i.ibb.co/cY8bNzN/image.png "Default value can be updated through our API")

No matter what you choose, Stencil image creator provides both QR and barcode that can be easily customized by you.

## Step 3: Download and print your ticket

There are various of ways to generate ticket with Stencil. Stencil supports generating high quality PNG, JPEG and even PDF.

### Using our Console to generate your ticket

You can generate your ticket by sending an image or PDF generation request to our API. Don't worry if this sounds intimidating - we've designed it to be user-friendly, with no technical skills required.

All you need to do is visit our console, review your modifications, and click on "Generate." Your image or PDF will appear in the output panel below.

![](https://i.ibb.co/5c0QfKG/image.png "Choose between image or PDF")

### Using our form builder to generate your ticket

In addition, we offer a form builder that enables you to create a form for your colleagues to use in generating your image. If you have a website, you can even embed the form directly into it.

![](https://i.ibb.co/bLVXskY/image.png "Use the form builder to create fields that user can customize")

![](https://i.ibb.co/JRpKYMW/image.png "Form is embedable. You have the choice to either generate the ticket as an image or PDF file.")

## Step 4: Automating the process

If you're generating tickets for personal events, automating the process may not be necessary. However, for businesses that create tickets frequently, automating the process can lead to increased efficiency. Stencil offers various approaches to automate the ticket creation process, which we'll outline below.

### Using Zapier to automate ticket creation

The first approach is to use Zapier to automate ticket creation. This is the most effective method for generating a large number of tickets, as Zapier connects to thousands of other apps.

![](https://i.ibb.co/s3QvBhr/image.png "Automating ticket creation workflow")

For example, if you're using online software like [PromoTix](https://www.promotix.com/) to manage your ticketings, you can create a Zap that connects to Stencil to create the ticket when an order is placed for an event. You can then connect to more apps like emailing the PDF copy of the ticket.

> Learn more on how to use Zapier with Stencil here,
> 👉 [How to use Zapier with Stencil to create a PDF](https://www.usestencil.com/blog/how-to-use-zapier-to-create-a-pdf)

### Using our API to automate ticket creation

Another option is to use Stencil's API to automate ticket creation. This API is straightforward and can be integrated into your application to generate online tickets.

### Using Airtable or Google Sheets to automate ticket creation

Stencil has built-in Airtable integration where you can import data from Airtable base as inputs for tickets creation. 

> 👉 [How to use Airtable to automate image generation for building visual marketing assets](https://www.usestencil.com/blog/how-to-use-airtable-to-automate-image-generation-for-building-visual-marketing-assets).

While we don't have built-in integration for Google Sheets, you can still achieve a similar process with Google Sheets. You can refer to our tutorial here where we set up Google Sheets as a web application that uses our API to generate images.

> 👉 [How to send image generation API request with Google Sheets](https://www.usestencil.com/blog/how-to-send-image-generation-api-request-with-google-sheet)


### Using query string URL to share ticket online

Stencil also provides a way to generate images dynamically using query string URLs, which is useful for sharing tickets online, such as in an email campaign.

![](https://i.ibb.co/Q8crwVT/image.png "Image changes based on the query string input")

Finally, signed URLs are another option that generate a URL from the server side and include a secret token, making it possible to invalidate the image if needed.


Learn how to generate high-quality PDFs with ease using Zapier's automation tool and Stencil's design capabilities with this comprehensive guide.


How to use Zapier to create PDFs with Stencil


Welcome to this tutorial on how to use Zapier to create a PDF! In today's digital age, having the ability to quickly generate high-quality PDFs is essential for many individuals and businesses. Fortunately, with Zapier, creating PDFs has never been easier. 

> Zapier is a powerful automation tool that allows you to connect different apps and services, and automate workflows to save time and streamline your processes.

In this tutorial, we will walk you through creating a PDF document using Zapier from Stencil's template.

## 1. Design your template

The Stencil template editor, which functions as both a PDF and image creator, is simple and straightforward to use. With this tool, you can create a dynamic design with replaceable layers, enabling you to generate multiple images or PDFs automatically from the same template in no time.

For this tutorial, we would like to use Zapier to generate a gift voucher automatically for our customers. Our template looks something like this.

![](https://i.ibb.co/GpYS0Sq/download-1.jpg "The amount $200 (and any other layers) can be replaced dynamically.")


> **Why use Zapier?**
>
> Even without Zapier, you still can generate a PDF right from Stencil like in our previous tutorial here: [How to create gift certificate voucher for free!](https://www.usestencil.com/blog/how-to-create-certificate-for-free).
> Zapier allows you to extend Stencil's PDF capability to other apps.

## 2. Create your Zap

To create your Zap,click on '+ Create Zap'. Then, select a trigger that will trigger your Zap. 

![](https://i.ibb.co/0rGHwqS/Screenshot-from-2023-05-01-11-32-58.png)

The required step will vary based on your specific needs. For instance, if you keep track of customer information using Google Sheets or Airtable, you could set up a trigger to generate a new voucher every time a new row is added to the sheet.

For our purposes, we want to activate the Zap when Stripe receives an event indicating that a subscription has been canceled. Our objective is to enhance customer retention, and one of our marketing strategies involves offering vouchers to incentivize customers to return.

![](https://i.ibb.co/8DXL63C/Screenshot-from-2023-05-01-11-39-24.png "Zap is triggered when a customer canceled a subscription")

## 3. Set up Stencil as the Zap action

After setting up the trigger, the next step is to create the action. Search for "Stencil" and choose "Create a PDF" for the event.

![](https://i.ibb.co/bN8pG8z/Screenshot-from-2023-05-01-11-40-57.png "Select Create a PDF event to create a PDF")

Next, you will need to connect to your Stencil account and provide the API key located in your project settings. It's important to ensure that you use the correct API key for your project to ensure that Zapier displays the appropriate templates.

![](https://i.ibb.co/9VXM0Qr/Screenshot-from-2023-05-01-11-42-03.png "API key can be found in projects setting page")

Choose the "Voucher" template from the available options. Once you've selected the template, all available modifications will automatically be displayed, eliminating the need to remember which inputs are required.

![](https://i.ibb.co/dmCDQK4/Screenshot-from-2023-05-01-11-45-57.png)

## 4. Adjust your Zap action

To craft the right PDF, it is essential to apply the correct modifications to the template.

![](https://i.ibb.co/qF0dxCB/Screenshot-from-2023-05-01-11-46-22.png "Stencil Zapier integration shows all available modfications for your template")

One thing to note is that, PDF generation happens asynchronously. Thus, the Zap will return immediately. If you need to check whether the PDF is ready, you can use "Instant trigger".

![](https://i.ibb.co/Bj9tqT0/image.png "Stencil provides Instant Trigger for any generated images or PDFs")


## 5. Run your Zap

You can run your Zap to generate the PDF. 

Stencil provides request logs for all requests including PDF generation request. Go to Stencil, and click on Requests on the left sidebar. 

Then select PDFs, and you should see all the generated PDFs.

## 6. What's next?

While this tutorial covers the fundamentals of using Stencil in conjunction with Zapier, there are many ways to customize and expand upon this integration to suit your specific needs.

For example, you could link this Zap to your Gmail account and send the voucher directly to your customers via email. There are numerous other compelling applications for this integration, such as generating personalized certificates or creating dynamic social media graphics. The possibilities are virtually endless!

![](https://i.ibb.co/yn0j1mQ/image.png)

We hope that this helps!

--


This tutorial will guide you through the process of creating a personalized gift certificate voucher for free. Learn how to choose a template, customize the design, add details, and print or share the voucher digitally.


How to create gift certificate voucher for free!


As a business owner, you want to show your customers how much you appreciate their patronage. One way to do this is by offering gift certificate vouchers that they can use to purchase your products or services. 

However, the cost of creating and printing gift certificates can add up quickly. The good news is that you don't have to spend a lot of money to offer gift certificates to your customers. In this article, we'll walk you through the process of creating free gift certificate vouchers that you can customize with your branding and logo. By providing your customers with a personalized gift certificate voucher, you'll not only show your appreciation, but also increase customer loyalty and drive sales.

## Making gift certification voucher

> \** _Stencil provides 50 credits when you signed up. You can generate your certificate for free using these free credits._

### Step 1. Customize your design

To start creating your gift certificate voucher, the first step is to design a template that aligns with your brand and the purpose of the voucher. While there are numerous free gift certificate voucher templates accessible online that you can draw inspiration from, it's crucial to customize the design to reflect your brand's personality and the intended occasion.

A voucher template usually is around 1152px x 768px.

To ensure a successful voucher redemption, it's important to make the voucher's amount or exchange value and its validity very clear. Additionally, you may want to consider including any terms and conditions that apply to the voucher, such as restrictions on certain products or services.

For this tutorial, we have design a simple voucher that looks like this.

![](https://i.ibb.co/GpYS0Sq/download-1.jpg)

To enhance the personal touch of the gift certificate voucher, you may also consider adding your customer's name to the design. This not only adds a special touch but also helps to build a good reputation with your customers.

### Step 2. Generating your voucher certificate as PDF

Believe it or not, the previous step was in fact the hard one. There are various ways to generate a PDF in Stencil without using code.

For this tutorial, we are going to use the Test Console to generate the PDF. As you use Stencil more and more, you'll find yourself using this Console a lot. It's the easiest way to generate image or PDF right from Stencil.

Click on Console button when viewing your templates inside your project. You'll be redirected to the Console page.

By default, Console generates images. You can select PDF from the dropdown option next to the Generate button.

![](https://i.ibb.co/z48FxvG/page-1.jpg)

Make some changes based on your requirement. Once you're ready, click on Generate to start generating your PDF.

![](https://i.ibb.co/26mpb4r/page-2.jpg)

It will take a couple of seconds to generate a PDF. This process is done asynchronously. You can wait until it's done or leave the page.

Once it is done, you should see the download link. If you leave the page, you can always go to the Requests page to find your generated PDFs.

![](https://i.ibb.co/vcKytBq/page-3.jpg)


The generated PDF is ready to be downloaded.

![](https://i.ibb.co/mN5QTFt/page-4.jpg)


## Tips

If you're printing the voucher, make sure that the paper quality is good and that the voucher looks professional. Make sure that the canvas size is the proper size.

If you're sharing the voucher digitally, you can save it as a PDF file and email it to the recipient, or share it on social media.

### Automate PDF certificates

Generating one or two certificates mostly can be done by hand, however if you're running a business or a software service, you may want to let automation handles this process.

#### 1. Zapier, Make, or any other automation tools

Stencil works really great with Zapier, Make and any other automation tools that requires very little technical expertise. 

Go to either Zapier or Make, and find Stencil app. For other automation tools, you can use our webhook and API to integrate with those tools. Generally, they work very similar to each other.

#### 2. Airtable integration

Stencil has built-in Airtable integration that is really easy to set up. 

From the hamburger menu, click on Airtable integration.

![](https://i.ibb.co/HPkfHns/Screenshot-from-2023-04-18-17-17-50.png)

If you haven't add Airtable token, please do so and follow the instructions. They are very easy to work with.

![](https://i.ibb.co/Kj23CW0/Screenshot-from-2023-04-18-17-18-02.png)

We have written a guide on how to use Airtable with Stencil. You can read them here, [How To Use Airtable To Automate Image Generation For Building Visual Marketing Assets](https://www.usestencil.com/blog/how-to-use-airtable-to-automate-image-generation-for-building-visual-marketing-assets)

#### 3. Built-in form

You can also create a form using our built-in form builder. Then, this form can be embedded or shared with your teams or clients, to let them create the certificate by themselves.


Create a tighter Stencil integration into your webapp using our new Editor Session feature. Create a shareable editor session on the fly with customizable permissions.


Introducing Editor Session


# Introducing Editor Session

Editor session gives a temporary edit access to your specified template through a shareable link. This is useful and a great way to integrate Stencil right inside your app.

Sessions can be programmatically created using our API, with customizable permissions for each session to meet your specific needs, such as restricting edits to certain layers.

## Creating a session

If you’re already familiar with generating image through our API, creating a session should be straightforward as the process is similar. You can also create a session inside your dashboard - please see Managing Sessions section.

To start creating a session programmatically, you will need your project’s`API_KEY` .

### Request

Below is the structure of the request, the details are explained later section of this post.

You need to specify the template to create the session for and how long the session should be active before it expires. If you don’t specify the permission, by default users have edit access to all layers.

```json
const data = {
  "template_id": `${TEMPLATE_ID}`,
  "expired_in": 60,
  "permissions": {
	  "layers": {
		  "actions": ["create", "edit"],
		  "fields": {
			  "name": "image_1",
			  "actions": ["edit"]
		  }
	  }
  }
}

fetch('https://api.usestencil.com/v1/editor/sessions', {
  method: 'POST',
  body: JSON.stringify(data),
  headers: {
    'Content-Type' : 'application/json',
    'Authorization' : `Bearer ${API_KEY}`
  }
})
```

### Response

Once a request is sent, an expected response will look something like this.

```json
{
	"expired_at": "2024-07-20T19:44:17Z",
	"session_url": "https://app.usestencil.com/editor/:template_id/sessions/:session_id?token=xxx"
}
```

Visit the `session_url` in a browser to start editing the template.

### Request body

| Field | Required | Description |
| --- | --- | --- |
| template_id | Required | Template to give access |
| expired_in | Required | Unit is in minutes. The number of minutes before the session expires. |
| permissions | Optional | Customize the permission for the session. Optional, when not provided the permission defaults to allowing all access. |

For `permissions` field, please see the next section (Handling permission).

## Handling permission

Permission can be customized either during session creation by passing permission options in the API request or you can also edit them using our web application.

For now, we only support layer permission,

- Can create layer
- Can delete layer
- Can edit layer

### Customize permission using the API

#### Layers

There are two fields that you can set with `layers`.

**Layer object**

| Field | Required | Description |
| --- | --- | --- |
| actions | Required | Sets the default actions allowable for all layers |
| fields | Optional | allow you to customize the permission for a specific layer. It accepts an array of object that has two fields. |

**Field object**

| Field | Required | Description |
| --- | --- | --- |
| name | Required | Layer's name |
| actions | Required | List of actions to allow for this layer. Action can be create, edit or delete. |

When `fields` are specified, it will overwrite the default `actions` specified.

**Examples**

```json
"permissions": {
  "layers": {
	  "actions": [],
	  "fields": {
		  "name": "image_1",
		  "actions": ["edit"]
	  }
  }
}
```

Assuming that you have two layers called `image_1` and `image_2`. In this example, you can only edit the `image_1` layer.
You can't edit `image_2` layer because the default permissions (set by `actions`) are set to none. You can't also create a new layer or delete any layers.

#### Actions

- `create`  - Allow new layer creation
- `edit` - Allow user to edit the layer settings
- `delete` - Allow user to delete the layer

## Managing sessions

Sessions can be managed through our dashboard where you can view active sessions, revoke access, and adjust settings as needed. This ensures you have full control over who can edit your templates at any given time.

To start managing sessions, under the template’s menu select “Editor Session”.

![image.png](https://i.ibb.co/GxST7dZ/image.png)

From the page, you can adjust the session options based on your needs.

You can also create a new session through this page without having to use the API.

![image.png](https://i.ibb.co/bgVbdMs/image-1.png)

![image.png](https://i.ibb.co/JtL455m/image.png)

## Demo

Here’s a session that you can play around. We have changed the permission so that you can only edit the `title` layer. How neat!

<UrlBox text="Click here to open the editor" href="https://app.usestencil.com/editor/templates/a808f9fb-7063-4f83-b7f6-82f00bae4561/sessions/1029df90-ec81-40da-a88a-0209edca7a76?token=Qretd7vy4wZPv7w7FJhDaR" />

As a bonus, we also embed a form for the template. Once you save the template, try to generate an image based on your changes.

<IFrame id="form_d4ba525c-b7d4-4576-a3a0-a58b996d4608" style="width: 1px; border: none; min-width: 100%; display: block; min-height: 600px" src="https://app.usestencil.com/forms/34aacb1e-a7e4-4b4d-bb64-2bffc3c930a4/d4ba525c-b7d4-4576-a3a0-a58b996d4608?embed=tru" />
<NextScript src="https://cdn.usestencil.com/assets/iframeresizer.min.js" />
<NextScriptInline content="window.onload=function(){iFrameResize({heightCalculationMethod: 'lowestElement'}, 'form_d4ba525c-b7d4-4576-a3a0-a58b996d4608')}" />

Hope this feature helps with a more intergrated experience using Stencil inside your own application.


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.


With the rebuilt editor, Stencil now enables users to generate PDFs of their templates, providing a high-quality feature that has been highly requested by users.Try out this exciting new feature!


PDF support is here!


We have some exciting news to share with you all - Stencil can now generate PDFs of your templates! 🎉

We know that this is something many of you have been waiting for, and we wanted to make sure we got it right. So we took our time and rebuilt the editor from scratch to ensure we could deliver a quality PDF generation feature.

Our new editor is now up and running, and we're thrilled to say that the PDFs generated from templates built with it look absolutely stunning. 😍 While we can still generate PDFs for templates built with our old editor, the quality won't be quite as good as those built with the new one.

We'll be diving into the details of why that is soon, but for now, we hope you enjoy using this new feature! Try it out and let us know what you think.


> ##### Unlocking new use case
> PDF generation allows for more diverse use case like creating simple invoices, certificates, shipping labels and many more.


## How to generate a PDF

Generating a PDF follows a process similar to that of generating an image. If you're familiar with using our API to create images, you'll find yourself right at home with PDF generation.

### New API

For this release, we introduce two new APIs.

##### 1. POST `https://api.usestencil.com/v1/pdfs`

To generate a PDF, simply send a `POST` request. This call returns immediately, as PDF generation is done asynchronously.

Upon making the request, you'll receive an id in the response. This id can then be used with the next API call to check on the status of PDF generation. Alternatively, you can also specify a return url as the webhook.

Once the PDF has been generated, we'll notify you by calling the webhook you provided. So sit back, relax, and let us take care of the rest!

##### 2. GET `https://api.usestencil.com/v1/pdfs/:pdf_id`

Send a `GET` request with the id from the previous API call to poll the status of PDF generation. You'll find the link to the generated PDF in the response if the status is `completed`.

```json
{
  "created_at": "2023-04-06T12:04:58.877Z",
  "id": "e45e9dc7-8eee-476c-9031-0d1040881d1a",
  "log": null,
  "metadata": {},
  "modifications": [
    {
      "name": "image_2",
      "src": "https://usestencil.s3.amazonaws.com/example.png"
    },
    {
      "name": "text_3",
      "text": "YELLOW WOOL HOODIEZZ"
    },
    {
      "name": "text_5",
      "text": "USD 49.99"
    }
  ],
  "pdf_url": "https://usestencil.s3.amazonaws.com/example.pdf",
  "self": "http://api.usestencil.test:4000/v1/pdfs/e45e9dc7-8eee-476c-9031-0d1040881d1a",
  "status": "completed",
  "template_id": "6132c433-aa49-4774-8eed-c402898f1437",
  "webhook_response_body": null,
  "webhook_response_code": null,
  "webhook_url": null
}
```

### Vectorized Text

Although we do offer support for the old template for generating PDFs, we strongly suggest that you utilize the new editor to create templates for PDFs.

The old editor renders content on a canvas, which implies that the text is transformed into a raster image and you will be unable to select the text.

Comparison between PDFs generated with the old and new templates. Text can be selected in the PDF on the left, generated with the new template.

![](https://i.ibb.co/3zpg1Zn/Screenshot-from-2023-04-13-14-08-49-1.webp "Left is PDF generated with new template. Text can be selected.")

The new editor properly embeds the font and provides an improved experience.

### Documentation

For more details, please read our documentation here [https://docs.usestencil.com/api/endpoints/pdfs](https://docs.usestencil.com/api/endpoints/pdfs)


### Integrations: Test Console, Forms, Zapier, Make, etc

Currently they are not yet supported but don't worry, we are working on adding support for PDF generation through these integrations too.

So stay tune! For Zapier, Make and other similar tools, you can still leverage on our API to automate PDF generation.


--

We couldn't be more thrilled about this new release as it unlocks so many possibilities for both us and our users. We hope you're just as excited as we are!

We invite you to give it a try and let us know what you think. Your feedback is invaluable to us and helps us improve our product for everyone. So don't hesitate to reach out and share your thoughts. We can't wait to hear from you!


Introducing our new editor - a complete rewrite from scratch! After much hard work and dedication, we are excited to unveil the end result.


Our new editor is here!


We are thrilled to announce the release of our new editor! After months of hard work, we've completely rewritten the editor from scratch. This new version represents a significant upgrade over the old editor in terms of performance, flexibility, and ease of use.

The decision to rewrite the editor was not taken lightly. We knew that it would be a significant undertaking, but we also knew that it was necessary to give our users the best possible experience. The old editor was starting to show its age, and it was becoming increasingly difficult to add new features and functionality.


> ##### Early access
> We are currently in the process of gradually rolling out our new editor to users. If you are interested in gaining early access to the updated version, please feel free to reach out to us.


## What is new?

### Layout

We've made some changes to the layout while still maintaining the overall look of the old editor for familiarity. The new editor offers much better use of the available space. 

We've reorganized the toolbars and menus to make them more intuitive and easier to use.

![](https://i.ibb.co/HNDsXKg/Screenshot-from-2023-03-24-15-51-29.png "New layout")

The sidebar is collapsable to give you more space to work with. You can freely move the canvas with our infinite viewer editor.

In contrast to our previous editor, the new version offers both light and dark themes that you can switch between.

### Simplified image layer

We've merged static and dynamic image layers into a single image component, which makes it much easier to work with images in the editor.

### Better layer control

Previously, when a layer was out of the frame of the canvas, the controls would disappear. If it was moved too far out of the canvas, it became unreachable. 

This issue has been fixed in the new editor. Now, you can always access the layer controls, no matter where the layer is located.

![](https://i.ibb.co/rFJPHVY/Screenshot-from-2023-03-21-22-13-53.png "Before - controls are hidden when out of frame")

![](https://i.ibb.co/0BKhp23/Screenshot-from-2023-03-21-22-14-26.png "After - fully visible")

### Faster loading time

As we no longer depend on FabricJs, there's a significant improvement in performance. The editor now loads much faster, even when working with large templates or images.

![](https://i.ibb.co/NSrcxj6/Screenshot-from-2023-03-24-16-18-41.png "Legacy editor - same image, same fonts, same design")
![](https://i.ibb.co/jWK9zjF/Screenshot-from-2023-03-24-16-19-30.png "New editor - same image, same fonts, same design")

We are only scratching the surface of what we can achieve to improve the editor performance. We have several other techniques and approaches that we plan to implement to further enhance the user experience.

### Better text support

By removing the canvas, we can improve the text support in our editor. Although FabricJS performs well in managing text, we have faced several limitations as we attempt to customize it further. For instance, enabling RTL support in FabricJS requires significant effort, and enhancing the text styling is also challenging. However, with our new editor, we aim to overcome these challenges, and you can expect to see more advanced text features in the upcoming releases.

## What's coming next?

The new editor allows us to do more in the future - we are excited to work on this feature!

### Improved editor experience

The rewrite puts us back on a solid foundation and will help us develop a better editor experience. We're working on several improvements to the user interface and workflow, which should make it easier and more intuitive to create templates.

### PDF generation

We're exploring PDF generation with the new editor. Any new templates made with the new editor will have an option to generate a PDF instead of an image. 

As we're no longer using a canvas-based template, the generated PDF can include vectorized text, meaning that you can select the text in the PDF. This feature will be especially useful for customers who need to create high-quality print materials, such as brochures, flyers, and business cards.

### Editor SDK

We have been eager to implement this feature for some time now. With this new capability, you can seamlessly integrate our editor into your backend system or even set up your own service using our editor.

### Feature parity

If you have noticed that certain components, such as graphs, from the previous editor are missing in the new version, please rest assured that we are actively working on integrating them into the updated editor and they will be available soon.

### More features!

All these features are planned for the editor, but we also have features planned for the rest of Stencil. Stay tuned!


--

In summary, we're incredibly excited about the release of our new editor. It represents a significant step forward in terms of performance, flexibility, and ease of use, and we believe that our users will be thrilled with the new features and functionality. We look forward to hearing your feedback and continuing to improve the editor in the months and years ahead.


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/create/product-ad](https://www.usestencil.com/create/product-ad). 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/create/product-ad) 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/signed-images) 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 automate race bibs making

Tutorials & Guides

More

Articles