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 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.js#app_id=[YOUR_APP_ID]";
     fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'db-js-sdk'));
</script>

III. 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-db-doctype=”facebook-cover” data-db-title="Design a Facebook Cover"> </div>

IV. 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-db-width

Design’s custom width

Value: Integer , Float

Default Value: 0

data-db-height

Design’s custom height

Value: Integer , Float

Default Value: 0

data-db-unit

Design’s custom width

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

Default Value: px

data-db-title

Your custom message on the button

Value: String(Less than 50 characters)

Default Value: Design It

data-db-image

Use this option as Image URL if you desire to start the design from an image

Value: String(as URL - should be accessible by public)

Default Value: Null

data-db-preview-target

Use this option as selector pattern (eg: ".new-header", "#facebook-ads-1") to determine the placeholder of result image

Value: String

Default Value: Null

V. Editor Configurations

You can also re-configure your Design IT editor controls. Copy and paste configuration script just above our SDK <script> tag

<script>
  window.DBSDK_Cfg = {
    export_mode: ['preview'],
    export_callback: function (resultUrl, exportTarget) {
      // do something with design image URL, which is only accessible for 24 hours
    }
  };
</script>
export_mode

Export mode(s) is used to configure the controls of editor, can be String or a JavaScript Array contains:

Value:

preview: Allow user to preview the design with DesignBold watermarked ( no payment required )

download: Allow user to download the design ( required payment if using premium resources )

publish: Allow user to publish the design to client web page ( required payment if using premium resources )

Default Value: ['preview','download']

export_callback

Export callback is used to configure the JavaScript callback with the exported image URL & the placeholder configured with data-db-preview-target

Value: a JavaScript function

Default Value: Null

VI. Demo

Single Button

- Design a FacebookCover



- Design with custom dimension (400 x 600 px)

On-Image

View demo

Placeholder

View demo