---
title: "Direct Mail app sample | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/dev-center/samples/direct-mail-app-sample/"
---

# Direct Mail app sample

> The source code of a direct mail application is available at:

https://github.com/aurigma/direct-mail-app-sample

In this repo, you can find a prototype of a marketing automation system that allows you to manage direct mail campaigns based on a concept of mailing lists. The example demonstrates how to use Customer's Canvas components to organize the following tasks:

1. Product selection, for example, postcards of a certain size
2. Choosing a design template
3. Opening the Design Editor configured for editing a VDP template
4. Filling in template data from the mailing list with text, QR codes, and images and getting product previews
5. Getting previews of templates filled with different data sets
6. Creating a _job_ for rendering print files by using variable data printing

## Technical details

The example is coded in .NET 8 with PostgreSQL databases and VueJS (Next 3) as the frontend. For simplicity, you can run it with Docker or, as an alternative, by building the code locally.

For more details about the application structure and how this functionality is implemented, refer to the sample wiki:

https://github.com/aurigma/direct-mail-app-sample/wiki

## Getting started

### Set up your Customer's Canvas tenant

Before you start, prepare the data you need to use the API. Specify this data in the configuration, as described below.

1. **Tenant ID**. Log in to your Customer's Canvas tenant, go to **Settings** > **Tenant**, and copy the number from the **ID** field (see the [Tenant Settings Topic](https://customerscanvas.com/docs/hub/admin-guide/settings/tenant.md)).
2. **Client ID**/**Secret**. Register your application using the Client Credentials authentication scheme in **Settings** > **External Apps** (see the [External Apps Settings Topic](https://customerscanvas.com/docs/hub/admin-guide/settings/external-apps.md)).
3. **Storefront ID**. Set up Integration in your tenant, which will identify the site where the application will be launched, in **Settings** > **Integrations** (see the [Integrations Settings Topic](https://customerscanvas.com/docs/hub/admin-guide/settings/integrations.md)). 
4. **API Gateway**. Depending on your hosting environment, it's https://api.customerscanvashub.com, https://api.eu.customerscanvashub.com, or https://api.au.customerscanvashub.com (see the [API Gateway](https://customerscanvas.com/docs/hub/dev-center/api.md#api-gateway) topic).

In addition, you will need to prepare test data, such as products, design templates, and mockups. For more information, see:

https://github.com/aurigma/direct-mail-app-sample/wiki/Setup-in-Customer's-Canvas

### Clone repo

Clone the repository with the following command:

```bash
git clone https://github.com/aurigma/direct-mail-app-sample.git
```

### Configure app

Configure the application, depending on how you run it:

- When using Docker, set environment variables in **docker-compose.yml**:

    ```yaml
    environment:
        - ConnectionStrings__DefaultConnection=Server=postgres;Port=5432;UserId=postgres;Password=<POSTGRES_PASSWORD>;Database=AurigmaDirectMailDb;
        - EntityFramework__EnableSensitiveDataLogging=false
        - CustomersCanvas__ApiGatewayUrl=<CUSTOMERS_CANVAS_API_URL>
        - CustomersCanvas__TenantId=<YOUR_TENANT_ID_FROM_CUSTOMERS_CANVAS>
        - CustomersCanvas__StorefrontId=<YOUR_STOREFRONT_ID_FROM_CUSTOMERS_CANVAS>
        - CustomersCanvas__ClientId=<YOUR_EXTERNAL_APP_CLIENT_ID_FROM_CUSTOMERS_CANVAS>
        - CustomersCanvas__ClientSecret=<YOUR_EXTERNAL_APP_CLIENT_SECRET_FROM_CUSTOMERS_CANVAS>
    ```
- When launching a local build, these variables are passed through **appsettings.json**. Do not commit this data to the repository. On the developer's machine, it is recommended to use `dotnet user-secrets`.

    ```bash
    dotnet user-secrets set "CustomersCanvas:TenantId" "<YOUR_TENANT_ID_FROM_CUSTOMERS_CANVAS>"
    dotnet user-secrets set "CustomersCanvas:StorefrontId" "<YOUR_STOREFRONT_ID_FROM_CUSTOMERS_CANVAS>"
    dotnet user-secrets set "CustomersCanvas:ApiGatewayUrl" "<CUSTOMERS_CANVAS_API_URL>"
    dotnet user-secrets set "CustomersCanvas:ClientSecret" "<YOUR CLIENT SECRET>"
    dotnet user-secrets set "CustomersCanvas:ClientId" "<YOUR CLIENT ID>"
    ```

For more details, see the [README](https://github.com/aurigma/direct-mail-app-sample) file.

### Run

When using Docker, just run:

```bash
docker-compose up --build --force-recreate
```

The application opens at `https://localhost:8091`.

If you prefer to run it without Docker, build the backend and frontend of the application and run them as described in [README](https://github.com/aurigma/direct-mail-app-sample).

If you have any problems or questions, create a ticket in the [helpdesk](https://customerscanvas.com/account/cases/add).