- About this repository
- What is Trakto ?
- What is Trakto SDK®?
- How can this project be useful for you?
- How to use ?
- Running on localhost
- Links
This repository is an example of a site using the Trakto Button®, via Trakto® SDK, for creating banners, social posts, ebooks, etc.
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
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:
- Trakto Button®: Integrate the our editor in your site or plataform.
- Trakto API®: Creation and management of documents created with Trakto via Restful API.
This project presents a simple way with lean approach on how to integrate the button to your website and/or platform.
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:
- Identify your
API Secret,Product KeyandEmail
Initialize the sdk and starting the editor via Button
<script>
window.onload = () => {
(function() {
TraktoEditor.init({
apiSecret: '<Your Api Key>',
productKey: '<Your Product Key>',
userEmail: 'user@email.com',
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: 'user@email.com',
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>- 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.
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 |
Request your credentials: Send a email to jorge@trakto.io
Official Docs - Trakto API® and Button®: Click here
See others avaliables examples: Click here