designertool
v0.32.0
Published
<h1 align="center">Postcard Designer Tool</h1>
Readme
User Guide
Install the package in your application:
npm install designertoolDefault config:
{
// Existing:
"size": {
"w": 9,
"h": 6
},
"template_scope": undefined,
"flags": {
"disable_default_templates": false
},
"initial_html": "<html>... HTML GENERATED BY A DESIGNERTOOL INSTANCE ... </html>",
// There can be selected between these two options: 'download' or 'save'
"htmlButtonBehaviour": 'save',
// This function is called when the user clicks on the Html button: 'download' or 'save'. (This is only an example, you can replace it with your own function)
"onHtmlButtonClick": (html: any) => {
console.log(html);
},
"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 { register } from 'designertool'
register()
</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',
},
]);Built With
- TypeScript
- Vue 3
- Vite
- Tailwind
Future Updates
- [ ] Conversion Tracking