This article explains how to embed the TemplateCloud editor on your website using some simple HTML & Javascript call.

You will also need to create an editor session to tell the editor which template or instance should be modified using an API call.

Note: this is a new simplified approach to opening the editor that means integrators no longer need to use the Create Instance API call.

Embedding the editor

Once you've got an sdsid, you can use this in your editor

To load the editor add this HTML

<html>
    <head>
        <title>Editor</title>
    </head>

    <body>
        <script src="https://dev.editor.w3p.com/js/editor.js"></script>

        <script type="text/javascript">
            TemplateEditor = new TemplateEditor({
                options: {
                    src: 'https://dev.editor.w3p.com',
                    height: '400px',
                    width: '600px'
                },
                params: {
                    sdsession: '<your sdsid>',
                    continue_url: '<your continue url>',
                    exit_url: '<your exit url>'
                }
            });
            TemplateEditor.init();
        </script>
    </body>
</html>

Options	Description	Required?
src	The url of the editor. Dev editor url = https://dev.editor.w3p.com Live editor url = https://editor.w3p.com	Yes
width	Width of the editor Eg 800px	No
height	Height of the editor Eg 400px	No
fullscreen	either "true" or "false" If "true" we'll load the editor fullscreen	No

Params	Description	Required?
sdsession	Get this from the POST /sessions/create API call See below for more details	Yes
continue_url	The url to send people to after they press Next step in the editor	Yes
exit_url	The url to send people to after they press Quit & cancel in the editor	Yes
locale	The language to open the editor in. By default we use English. Can also use: tc_US for US. tc_AU for Australia tc_NZ for New Zealand tc_IE for Ireland tc_FR for France tc_NL for Holland tc_ES for Spain tc_DE for Germany tc_IT for Italy tc_SE for Sweden tc_PT for Portugal	No

Create session

Syntax

/sessions/create

Creates an editor session to open the editor.

Pass through a template id to start editing a new template.
Or pass through an instance id to re-edit a design that's already been started.

Works with both GET and POST API calls
POST only returns in XML, but requires no user_key

Parameter	Description
format	json or xml
Required option
template_id	One template ID. Use this to get a SDSession to use when you open the editor. Use a template_id to create a new instance and a new editor session.
instance_id	One instance ID. Use this to get a SDSession to use when you open the editor. Use a instance id to re-edit a design that's been opened in the editor by a customer at least 1 time before. Or to edit an instance you've made using the depreciated /templates/<template.id>/edit

Example request & responses

GET/POST template_id request

http://api.templatecloud.com/sandbox/sessions/create/?template_id=31081

GET/POST template_id response

<?xml version="1.0" encoding="UTF-8"?>
<response status="ok">
  <message>SDSession created.</message>
  <sdsid>9cfcd1e8f11a5659752074ff33e17b9af869a34f</sdsid>
  <instance_id>2196719</instance_id>
  <template_id>31081</template_id>
</response>

GET/POST instance_id request

http://api.templatecloud.com/sandbox/sessions/create?instance_id=2196517

GET/POST instance_id response

<?xml version="1.0" encoding="UTF-8"?>
<response status="ok">
  <message>SDSession created.</message>
  <sdsid>4cbde1cb9d1a81e397937a0576d654f03f824103</sdsid>
  <instance_id>2196517</instance_id>
  <template_id>31081</template_id>
</response>

Jump to contents page of

TemplateCloud API Guide

This is for you if you're looking for a way to integrate TemplateCloud's extensive library of templates, powerful customisation tools, and printing services* into your own website. ...

TCAPI: Embedding the editor

Embedding the editor

Create session

Example request & responses

Jump to contents page of

TemplateCloud API Guide