All Collections
API
Javascript client SDK (Alpha)
Javascript client SDK (Alpha)

Javascript client for browser (alpha)

Martin avatar
Written by Martin
Updated over a week ago

This article is a simple introduction to our new Javascript SDK client for browsers. For more information contact support. To use our API you require an enterprise plan and an API key: [email protected].

What can you do with the SDK?

The alpha release of the JS Client allows you to:

  • Post tickets onto boards with file-uploads.

  • Create your own custom contact, lead forms that post to your boards

  • Create and save estimates, with price breakdowns, specs, files and auto-invoicing.

  • Create and send invoices, with specs, price breakdowns and files.

Getting started (browser)

To load the Tudodesk JavaScript SDK, use a script tag like the one in the following example:

<script async defer
  src="https://unruffled-davinci-fe957f.netlify.com/tudo-sdk-latest.min.js">
</script>

How do I get my API access key

To access the Tudodesk API you need an enterprise account and an invitation to use it. Follow the link below for more information.
Request your API credentials and key

Hooks

Hooks add a layer of security by allowing the domain adminstrator to set-up a "hook" endpoint to accept requests from the API. Each hook is mapped to a board. Before you can post submissions from the API the domain Adminstrator will need to set-up the required hook and provide the  hook_id .  

To initialize the SDK you need:

  •  api_key  

  •  hook_id   the ID of the hook you are posting to.

  •  device   a unqiue string that describes the widget you are building.

  •  geo   true or false. If set true we will append GEO data to the submission.

  •  tax_id  required if you are posting an estimate or invoice.

  •  tax_rate   default tax rate (number).

Tudodesk.initialize({api_key:"[API_KEY]",hook_id:"[hook_id]","device": "contact form","geo":true,tax_id:"[tax_id]",tax_rate:20});

Hello World example

The simplest form of using the API

Tudodesk.initialize({api_key:"[API_KEY]",hook_id:"[hook_id]","device": "contact form"});

var payload={"firstname":"John","lastname":"Doe","email":"[email protected]","name":"Hello World"};
//
// Posts a new ticket to the designated board with the title 'Hello World'
//
Tudodesk.ticket.submit(payload,true,function(res){console.log(res);});

The document Helper

The document helper is used for creating more advanced documents.

var estimate = Tudodesk.document({firstname:"John",lastname:"Doe",email:"[email protected]",name:"Test estimate",ref:"abcd"});

You can pass the helper directly to the submit function

Tudodesk.ticket.submit(estimate,false,function(res){console.log(res);});

The helper has the following methods

  • set(property, value)

  • line.money(obj);

  • line.item(obj)

  • addSpecification(str)

  • storeFile(name,url,callback)

Using the Helper to send an estimate

You will need to set-up a hook on the estimate or invoice board. Contact your domain administrator.

Tudodesk.initialize({api_key:"[API_KEY]",hook_id:"[hook_id]","device": "contact form","geo":true,tax_id:"[tax_id]",tax_rate:20});

//
// Here we are using the document helper.
//
var estimate = Tudodesk.document({firstname:"John",lastname:"Doe",email:"[email protected]",name:"Test estimate",ref:"abcd"});

//
// We add two item lines #1,#2 (prices are nett)
// the api will calculate any tax using the tax_rate and tax_id passed when // SDK is initialzed.
//
estimate.line.money({name: "item #1", unit:10});
estimate.line.money({name: "item #2", unit:20,qty:2});

//
// We pass 'false' as the second property instructing the API to mark the
// document as sent. This will fire the autosend event.
//
Tudodesk.ticket.submit(estimate,false,function(res){console.log(res);});

Setting properties

estimate.set("info": "-18mm MDF -Multiple shelves -Heavy duty hindges");
estimate.set("ref": "TUDO10910");
// Billing address
estimate.set("address", "Flat 1 john does place");
estimate.set("city", "New york");
estimate.set("region", "NY");
estimate.set("zipcode", "112012");
estimate.set("country", "United States");

//Shipping address
estimate.set("address_destination", "Flat 2, John does place, New York, NY 112012. United States");
estimate.set("phone", "900-100-2000");
// mobile long id with country code
estimate.set("mobile", "001600700300");

Setting specifications on documents (summary)

Whe you create a document such as an Estimate or an Invoice you can store additional information about the proposal or purchase that is not stored in the money lines. For example you might what to add specifications such as sizes, color, type of finish and so on.

You can add customer specifications to a document as follows:

estimate.set("info","Custom build specification as follows:");
estimate.addSpecification("Width: 300mm");
estimate.addSpecification("height: 250mm");
estimate.addSpecification("25mm MDF board");
estimate.addSpecification("Heavy duty locks, handles and hidges");
estimate.addSpecification("Custom detail and artwork");

Attatching files

Multiple files can be added by passing a file name and URL to the file attachment. The URL should be accessible via a web-browers. You can use basic authentication in your URL should this be required.

estimate.storeFile("googlelogo_color_272x92dp.png","https://www.google.co.uk/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png",function(ev){
  //
  // note we use the async callback to wait before we submit the document.
  //
  Tudodesk.ticket.submit(estimate,false,function(res){console.log(res);});

});

The following file types can be uploaded.

  • PDF files (PDF)

  • Powerpoint files (PPT, PPTX)

  • Excel files (XLS, XLSX)

  • Word files (DOC, DOCX)

  • ODF word processing documents (ODT)

  • ODF presentation documents (ODP)

  • Image files (gif, tiff, jpg, jpeg, png)

  • HTML files.

For full documentation on the current JS SDK contact [email protected]

Did this answer your question?