DaVinci Service (DVS) is a plug and play solution for creating professional templates or user created designs depending on your needs for a wide variety of products. With just a few lines of code, you can embed DVS into your site and be ready to go. We also give you full control of DVS' options, look, and feel in order to customize your user's experience.

You can set up DVS in a couple of minutes and customize the settings from there by following these steps.

Step 1: Set up an account

Create a free account here. With an account you can customize which DVS features you want. Once you have an account, you will be able to customize how DVS looks and what features you want available.

Step 2: Add DVS to your site

In this step you will add DVS to your site. Determine where in your page you want it and then add the following tag there:

<div id="davinci"></div>

To initialize and control DaVinci Designer, we now need to add some JavaScript. Add the following code to your page:

<script type="text/javascript" src="//davinci.opensoftdev.com/dvd/davinciDesigner.js"></script>
<script>
    $(document).ready(function () {
        var DVS = new opensoft.Davinci('davinci', {
            key: '1234'
        });
    });
</script>

Step 3: Customize your tag

We now need to make a couple of changes to the script you just added. In the script where it says key: '1234', you need to enter in the key that we provided you when you created your account.

There are many ways to configure what is displayed when DVS initializes. The above code will give you a blank generic product, but there are many different options to chose from. With just a couple more lines of code, you can auto load a template or allow a customer to continue where they left off on a custom design. Read the Initial Parameters section to learn how to customize these parameters to initialize DVS the way you want.

Step 4: CORS

If you are pulling images, fonts, or other assets from a server other than the one that DaVinci is embedded in, you will need to set up CORS (cross-origin resource sharing). You can either leave it wide open (which presents possible security concerns) or limit access. You will need to create a custom solution for IE9 and IE10 if you require compatibility with those browsers since they don't support CORS.

Step 5: DV Viewer tab

Also DVS can show tabs with artboard and DV Viewer. Tabs will be switched on if you put DV Viewer instance into global variable window.opensoft.DavinciViewer and set initial parameter eneableRealTimeDvv to true.

If you want to set up DVV not in DVD tab with real-time updating subscribe to instantSnapshotAvailable DVD event and use DVV method updateDesign. In this case set eneableRealTimeDvv to false.

More information about DV Viewer installing here.

DVV in DVD tab

If you are happy with the default design, you can leave it as is and not change the styling at all. But, if there are certain aspects you'd like to change or if you want to change the look of everything, you can override our stylesheet to your own one. All our 'id' and 'class' attributes have prefix 'dv' to avoid name collision with your domestic styles.

Custom Front-End Controlled

We also allow for advanced applications, if you want to control DVS through your own interface where you can customize everything to look and work exactly like you want. This features requires you to create your own elements and hook them up to our code.

Account Controlled

Soon we will provide a tool where you can create your own style in an editor and save it to your account. It will immediately be available on your site with no coding required.

We give you the option to store assets on our servers through Smock, our template repository, or on your own server. Storing assets in Smock is the default process. If you would like to use your own servers for storage, follow the steps below.

Custom Storage

Only follow these instructions if you plan on using your own server to store uploaded assets.

Create a service that DaVinci Designer can call to upload assets. In Upload request Davinci Designer will provide the following data:

Parameter Name Parameter Type Description
Filename String Name of the file (including file extension)
Filedata File Object File object that is retrieved as a result of a user selecting file using the <input> element, or from a drag and drop operation
designToken String Design Id of the current design

Your service should return an XML response which includes filePath (full resolution), previewPath (low resolution), and scale. The response should be formated like this:

<UploadSuccess>
    <filePath width="700" height="500" format="image/jpeg">//yourdomain.com/uploaded/assets/1/high/123.jpg</filePath>
    <previewPath width="700" height="500" format="image/jpeg">//yourdomain.com/uploaded/assets/1/low/123.jpg</previewPath>
    <scale>1</scale>
</UploadSuccess>

By default user is allowed to upload any file types. You are free to choose file types allowed for uploading, just set up your server-side to handle those types but please make sure that the return images (images that filePath and previewPath are referring to) have JPG, PNG or GIF extension. Only those three formats are supported by DaVinci Designer for now.

Add the uploadPath param as described in the Initial Parameters section. This lets DaVinci Designer know where to upload the images to.

Creating a new instance of DVS requires the use of parameters. Required parameters are denoted by an asterisk next to their name. The rest are either optional or have default values.

When you call new opensoft.Davinci( ... ) in the embed tag, it queues a new instance to load. Several things need to be loaded before it actually builds that new instance of DVS. Once the initial work is done, future creation of instances on same page are synchronous. The onInit param allows you to detect when the instance is done building. If you want to check if the initial work is already complete, you can call opensoft.Davinci.isReady. If you create an instance of DVS and wait for the onInit to come back, from then on opensoft.Davinci.isReady will be true on that page.

Design fetching priority

Following is a priority queue of initial parameters that affect design fetching:

Parameters Description
designXml Design will be built from the passed in XML.
clientId & designId A combination of these two parameters will be used to fetch existing design from the database.
templateId This parameter will be used to fetch template from the template storage.
designSize A blank template will be created and sized using passed in dimensions.
designImage A blank template will be created and sized using dimensions of passed image. Design image will be scaled according to design size if designSize is also passed in.
productType This parameter will be used to pull blank product template from the database.

If none of the above parameters are passed, a blank template with default dimensions will be created.

{[{ paramCtrl.getApiName() }]}

Arguments

  • None

Returns

  • None