Appearance

Return to top
On this page

Getting started

Set up edtake script

First add this script to your page.

html
<script>
  (function (e, d, t, a, k) {
    const b = e.createElement(d)
    b.type = 'text/javascript'
    b.async = !0
    b.defer = 'defer'
    b.src = t
    const c = e.getElementsByTagName(d)[0]
    c.parentNode.insertBefore(b, c)
    window.edtakeApiKey = a
    window.edtakeSdkEnv = k
  }(document, 'script', 'https://app.edtake.com/js/embed.umd.min.js', '<API_KEY>'))
</script>

Replace <API_KEY> with the key provided by edtake.

Generate button

Add button with correct data attributes to trigger iframe display.

html
<button
  data-edtake-email="<REPLACE_BY_USER_EMAIL>"
  data-edtake-locale="fr-FR"
  data-edtake-action="<REPLACE_BY_ACTION>"
  data-edtake-workspace="<REPLACE_BY_WORKSPACE>"
  data-edtake-mission="<REPLACE_BY_MISSION>"
>
  Your button text
</button>

Field hints

You can indicate specific fields by providing a stringify object in data-edtake-hint.

html
<button 
  data-edtake-action="mission-creation" 
  data-edtake-locale="fr-FR"
  data-edtake-email="john.doe@company.com" 
  data-edtake-workspace="60bf08e86cb03c001d48512b"
  data-edtake-hint='{"lcms": "MindOnSite", "authoringTool": "Kumullus", "job": "Instructional designer"}'
>
  Create mission from edtake
</button>

Manage responses

In order to manage actions response, create an event listener in your page.

js
window.addEventListener('EdtakeEvent', function (e) {
  // Manage event response
  // Data are stored in e.detail
  console.log('Event: ', e)
});

Developement mode

For developement purpose, you can additionnaly add a <SDK_ENV> parameter to the script as follow :

html
<script>
  (function (e, d, t, a, k) {
    const b = e.createElement(d)
    b.type = 'text/javascript'
    b.async = !0
    b.defer = 'defer'
    b.src = t
    const c = e.getElementsByTagName(d)[0]
    c.parentNode.insertBefore(b, c)
    window.edtakeApiKey = a
    window.edtakeSdkEnv = k
  }(document, 'script', 'https://app.edtake.com/js/embed.umd.min.js', '<API_KEY>', 'DEV'))  // <-- here as last parameter
</script>

This parameter is optionnal. When specified, the iframe loads a developement app with basic inputs and data are not stored. You also don't need <API_KEY> if you work on developement mode.

If not specified, iframe load production app.

Here is an example app using the SDK : sdk-tiers-app. Feel free to reuse the source.