Support for

TCAPI: Embedding the editor

Alistair Wilson
by Alistair Wilson 3 years ago
 

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

 
 
 

All content is (c) Grafenia Operations Limited, 2019 and may not be used, copied or distributed without permission.