Direct Mail App Sample

• 2 minutes to read

You can find an example of a direct mail application on GitHub:

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, navigate to Settings > Tenant, and copy the number from the ID field (see the Tenant topic).
2. Client ID/Secret. Register your application using the Client Credentials authentication scheme in Settings > External Apps (see the External apps topic).
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 topic).
4. API Gateway. Depending on your hosting environment, it's https://api.customerscanvashub.com/ or https://api.eu.customerscanvashub.com/ (see the 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:

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:

  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.

  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 file.

Run

When using Docker, just run:

docker-compose up --build --force-recreate

The application will be launched 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.

If you have any problems or questions, please create a ticket in the helpdesk.