Designertool NPM

User Guide

To use the package in your project, before installing you need to first create an .npmrc file using the following details:

@webgurus-eu:registry=https://npm.pkg.github.com
//npm.pkg.github.com/:_authToken=${NPM_TOKEN}

Install the package in your application:

$ npm install @webgurus-eu/postcard-designer-tool

Default config:

{
  "size": {
    "w": 9,
    "h": 6
  },
  "zoom": 100,
  "backgroundColor": "#ffffff",
  "backgroundImage": null,
  "border": {
    "enabled": false,
    "width": 6,
    "color": "rgba(0, 0, 0, 0)"
  },
  "canvasOffset": {
    "x": 0,
    "y": 0
  },
  "address_box": {
    "visible": true,
    "width": 3.6,
    "height": 2.2
  },
  "merge_variables": [
    "company",
    "firstname",
    "lastname",
    "address1",
    "address2",
    "city",
    "state",
    "zipcode"
  ],
  "return_address": {
    "company": "Test",
    "firstname": "Jeff",
    "lastname": "Doe",
    "address1": "425 Main St",
    "address2": "Apt 1",
    "city": "Miami",
    "state": "FL",
    "zipcode": "34689"
  },
  "example_data": [
    {
      "company": "Acme",
      "firstname": "John",
      "lastname": "Doe",
      "address1": "123 Main St",
      "address2": "Apt 1",
      "city": "Los Angeles",
      "state": "CA",
      "zipcode": "12345"
    },
    {
      "company": "Acme",
      "firstname": "Jane",
      "lastname": "Doe",
      "address1": "23 Any street",
      "address2": "Apt 45",
      "city": "Anytown",
      "state": "CA",
      "zipcode": "23452"
    }
  ],
  "api": {
    "base_url": "https://dev-designer.directmailmanager.com/api",
    "project_id": 1,
    "user_id": 2
  },
  "user_id": "{INTERNAL_USER_ID}",
  "google": {
    "map_api_key": "{YOUR_GOOGLE_MAPS_API_KEY}",
    "use_predefined_locations": false,
    "to_addresses": ["1 Main St Apt 1, Los Angeles, CA 12345"]
  },
  "fonts": [
    {
      "name": "Arial Black",
      "link": "https://fonts.googleapis.com/css?family=Arial+Black"
    },
    {
      "name": "Courier New",
      "link": "https://fonts.googleapis.com/css?family=Courier+New"
    }
  ]
}

Use the component in your application:

<script setup lang="ts">
import { PostcardDesigner} from "@webgurus-eu/postcard-designer-tool";
import "@webgurus-eu/postcard-designer-tool/dist/index.css";

</script>

<template>
  <PostcardDesigner />
</template>

Available functions to modify the default config:

Every option can be modified by calling the init() function except the fonts, which can be extended by calling the addFont() function:

import { init, addFont } from '@webgurus-eu/postcard-designer-tool';

init({
  backgroundColor: '#000000',
  return_address: {
    company: '',
    firstname: 'Chuck',
    lastname: 'Norris',
    address1: '420 Forrest St',
    address2: '',
    city: 'Austin',
    state: 'TX',
    zipcode: '34444',
  },
});

addFont([
  {
    name: 'Kablammo',
    link: 'https://fonts.googleapis.com/css?family=Kablammo',
  },
  {
    name: 'Bebas Neue',
    link: 'https://fonts.googleapis.com/css?family=Bebas+Neue',
  },
]);