trakto / trakto-sdk-sample

Exemplo de site com uso do botão do Trakto, via Trakto SDK® e API®

Summary

1. About this repository
2. What is Trakto ?
3. What is Trakto SDK®?
4. How can this project be useful for you?
5. How to use ?
6. Running on localhost
7. Links

1. About this repository

This repository is an example of a site using the Trakto Button®, via Trakto® SDK, for creating banners, social posts, ebooks, etc.

2. What is Trakto ?

Trakto is a platform for creating marketing materials, sales and print.

With Trakto you can create professional designs without having experience with complex platforms, for example Photoshop and Illustrator.

See more on: https://trakto.design

3. What is Trakto SDK® ?

Trakto SDK® is a development package utilizing all the resources for creating digital marketing materials, print, sales, etc. It's way to integrate the our editor in your site.

The development packages includes:

1. Trakto Button®: Integrate the our editor in your site or plataform.
2. Trakto API®: Creation and management of documents created with Trakto via Restful API.

4. How can this project be useful for you ?

This project presents a simple way with lean approach on how to integrate the button to your website and/or platform.

5. How to use ?

The project of this repository already provides information and credncial usage that can be used as an example. If you want to customize with your credentials:

1. Identify your API Secret, Product Key and Email

Initialize the sdk and starting the editor via Button

 <script>
    window.onload = () => {
        (function() {
            TraktoEditor.init({
                apiSecret: '<Your Api Key>',
                productKey: '<Your Product Key>',
                userEmail: '[email protected]',
                buttonClassName: 'trakto-button', 
                customLoaderImageUrl: '<Loader image URL>',
                customLoaderColor: '<Hexadecimal Loader color>',
                customLoaderBgColor: '<Hexadecimal Background Loader Color>',
                defaultCallback: data => {  },
                listFormatsCallback: (data) => { },
                listTemplatesCallback: (data) => { },
                listDocumentsCallback: (data) => { }
            });
        })();
    };
</script>

Initialize the sdk and starting the editor via JS

 <script>
    window.onload = () => {
        (function() {
            TraktoEditor.init({
                apiSecret: '<Your Api Key>',
                productKey: '<Your Product Key>',
                userEmail: '[email protected]',
                customLoaderImageUrl: '<Loader image URL>',
                customLoaderColor: '<Hexadecimal Loader color>',
                customLoaderBgColor: '<Hexadecimal Background Loader Color>',
                onAuthenticated: traktoEditor => {
                    if (traktoEditor) {
                        traktoEditor.openDocument('<Document ID>', data => console.log('closed editor'));
                        traktoEditor.openFromTemplate('<Template ID>', data => console.log('closed editor'));
                        traktoEditor.openFromFormat('<Format ID>', data => console.log('closed editor'));
                    }
                },
                defaultCallback: data => {  },
                listFormatsCallback: (data) => { },
                listTemplatesCallback: (data) => { },
                listDocumentsCallback: (data) => { }
            });
        })();
    };
</script>

2. Make the button available to initialize the editor

2.1 Initializing via button

Create from empty page:

   <button class="<Your Button Class Name>" data-formatid="<Your Format Id>"> 
        Your button title 
   </button>

Create from template:

   <button class="<Your Button Class Name>" data-templateid="<Your Format Id>"> 
        Your button title 
   </button>

Continue editing a previously created document:

   <button class="<Your Button Class Name>" data-documentid="<Your Format Id>"> 
        Your button title 
   </button>

2.2 Initializing via JS Function

Function	Description
openDocument	Opens the document previously created by user
openFromTemplate	Creates the document from a template
openFromFormat	Creates the document from a pages format

Access official documentation if you want to know how to receive the template ID's and page formats.

6. Running on localhost

When you're testinglocalhost, the Trakto Button® and Sdk® is avaliable only on ports:

Host
http://localhost:3000
http://localhost:4000
http://localhost:4200
http://localhost:5000
http://localhost:8000
http://localhost:8080

7. Links

Request your credentials: Send a email to [email protected]

Official Docs - Trakto API® and Button®: Click here

See others avaliables examples: Click here