DesignBold’s DesignIT Button

Let your customers create the best design with just one simple button

I. Introduction

DesignIT Button

Instead of just offering an ‘Upload’ button and expecting users to figure out the rest, the DesignIt Button from DesignBold enables a website’s users to browse through thousands of stunning layouts, professional images and graphic elements, have them all-in-once-place and easily create amazing graphic designs without the need of leaving their page

The choices will be endless, from a header, an advertisement, to a social media post or even a custom dimension canvas. The customers can Preview the final design once they finish, Download it to their computer or DropBox, Share directly on Social Media Channels such as Facebook or Twitter, and even Publish their design directly to your site. All designs will be saved on the user’s DesignBold profile so they can access them from anywhere, anytime.

II. Install Single Button

Install a Single DesignIt Button on your website will allow your users to create a fixed document type that you decided or a custom dimension design on a blank canvas.

Using Code Generator Tool

Your APP ID (*)

Button’s title

Select dimension

Custom unit (in pixel, inch or millimeter)

Width

Height

Get code

Custom script

- Input DesignIT Button’s script just above the close <body> tag

- Input DesignIT Button’s HTML into the exact spot in your HTML where you would like the button to appear

- See Button Options for more tips and support contents

<div class="db-btn-design-me" data-db-width="400" data-db-height="600" data-db-unit="px" data-db-title="Design a 400 x 600"> </div>
<div class="db-btn-design-me" data-doctype=”facebook-cover” data-title="Design a Facebook Cover"> </div>

III. Install SDK

Copy and paste DesignIt Button’s SDK script just above the close <body> tag

<script>
  (function (d, s, id) {
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) return;
     js = d.createElement(s); js.id = id;
     js.src = "https://sdk.designbold.com/button/v1.0/js/sdk.js#app_id=[YOUR_APP_ID]";
     fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'db-js-sdk'));
</script>

IV. Install On-Image Button

Install DesignIT Button onto one or more images on your website will allow your users to create a design from that image, feeding with the dimension of the image itself. The image will be uploaded directly to ‘Upload’ folder in user’s DesignBold account.

Copy and paste DesignIT Button’s SDK script just above the close body tag <body> of your page.

- Replace the Image tag <img> with the HTML script below. Or you can simply add “db-img-design-me” class directly to the images you want to allow your users to design. The DesignIt Button will show up on the top right corner of the images.

<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-5.jpg" class="db-img-design-me" width="600px" height="auto" />

- If you wish to use On-Image DesignIt Button without feeding the dimension of the image itself (for example: placeholder), you can add data-width, data-unit and/or data-doctype , similarly with the DesignIt Single Button:

data-image=”false”

For example:

<img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png" class="db-img-design-me" data-width="400" data-height="450" data-unit="px" data-title="Design with Placeholder" data-image="false" />

V. Button Options

data-db-doctype

Doctype ID; the type of design that you want your users to create, suggested by designbold.com

Value: a4 , album-cover , announcement , blog-graphic , blog-title , ... View all

Default Value: Null

data-width

Design’s custom width

Value: Integer , Float

Default Value: 0

data-height

Design’s custom height

Value: Integer , Float

Default Value: 0

data-unit

Design’s custom width

Value: px(pixel) , in(inch) , mm(millimeter)

Default Value: px

data-title

Your custom message on the button

Value: String(Less than 50 characters)

Default Value: DesignIt

data-image

For On-Image Button, allow to feed the image’s dimension

Value: True , False

Default Value: True

VI. Demo

Single Button

- Design a FacebookCover



- Design with custom dimension (400 x 600 px)

On-Image