Welcome to the Design Huddle Javascript SDK! This library is intended to:

• Faciliate the creation of and 2-way communication with the editor iframe
• Provide helper methods for the most common backend API interactions
• Implicitly handle guest and visitor user authentication (when no explicit user-based authentication)

Getting Started

First include the library on your page:

<script type="text/javascript" src="https://cdn.designhuddle.com/jssdk/v1/lib.min.js"></script>

Then configure the library with your Design Huddle (sub)domain and authentication info. Check out the configure method to see examples of providing a previously acquired access token to the library or specifying that implicit guest or visitor user authentication should be used.

From there you may want to first list the available templates to retrieve a template id/code and then use that to create a new user-specific project from a template. Or list the user’s existing projects to allow the user to continue where they previously left off. Or allow the user to create a new project from scratch, with a canvas size and optional background shape/color/photo. With a project created, you can then launch the embedded editor to allow the user to start designing.

Common Example

DSHDLib.configure({
    domain: "your_domain_here",
    access_token: "xxx"
});

var template_code = "xxx";
var editor_container_element_id = "editor_parent";

DSHDLib.createProject({ template_code: template_code }, function(err, project){
    //handle possible error here
    DSHDLib.Editors.insert(editor_container_element_id, { project_id: project.project_id }, function(ierr, e){
        //handle possible error here
        var editor = e;
        editor.onInitialized(function(){
            console.log("Editor Loaded");
        });
    });
});

Single Page Apps

When using frameworks with built-in routing like React and Angular, be sure to remove the editor as part of a component's destruction/unmount, otherwise this library will not know the iframe was removed and will throw an error when attempting to reload the same project again.