Drawings on any website

Two lines of HTML for a quick start, or the JavaScript SDK when you want your own customer IDs, triggers and styles. The entry form opens in a modal — customers never leave your page.

Access to your site’s HTML or front-end code
Your ENTD Connection ID and the Drawing ID of the drawing to run

Setup

Quick start: two lines of HTML

The embed script finds every element with data-entd-drawing and renders the ENTD button in it — including elements added later by your app.

HTML

<!-- Where the ENTD button should appear -->
<div data-entd-drawing="YOUR_DRAWING_ID"></div>

<!-- Once per page (or once per site in the <head>) -->
<script src="https://entd.tech/em/entd-embed.js"
        data-connection-id="YOUR_CONNECTION_ID" async></script>

Full control: the SDK

Load the library and render the button yourself. Pass your customer’s ID as external_id so entries are tied to your accounts.

HTML

<div id="entd-draw"></div>

<script src="https://entd.tech/em/entd.js"></script>
<script>
  const entd = new ENTD('YOUR_CONNECTION_ID')
  entd.init()

  entd.renderDrawingButton(
    '#entd-draw',
    'YOUR_DRAWING_ID',
    // Your customer's ID and where the entry comes from
    { external_id: 'CUSTOMER_ID', source: 'My Store' },
    { theme: 'dark', size: 'medium', shape: 'pill', text: 'enter_draw' },
  )
</script>

Use your own trigger

Attach the drawing to any element of your page or open it from code.

JavaScript

// Open the drawing modal from your own button
entd.attachDrawingModal('.my-draw-button', 'YOUR_DRAWING_ID', {
  external_id: 'CUSTOMER_ID',
  source: 'My Store',
})

// …or from anywhere in your code
entd.openDrawingModal('YOUR_DRAWING_ID', { external_id: 'CUSTOMER_ID', source: 'My Store' })

Match your brand

Tune the built-in button with CSS variables or turn its styles off completely.

JavaScript & CSS

entd.renderDrawingButton('#entd-draw', 'YOUR_DRAWING_ID', data, {
  styled: false,              // no built-in CSS, only class names
  className: 'my-shop-button',
  text: 'Enter the raffle',
})

/* Or keep the built-in styles and tune the colors */
.sde__button {
  --sde-btn-bg: #111;
  --sde-btn-fg: #fff;
}

Button options

theme — light, dark, auto
size — small, medium, large
shape — rectangular, pill
text — enter_draw, join_giveaway, participate, try_your_luck or any string
logo, fullWidth, className, styled

Data you send

external_id — the customer’s ID in your system. Any stable unique value works; with the embed script, visitors without an ID get an anonymous one.
source — where the entry comes from, e.g. your store’s name or domain.

npm

Building a bundled app? The library is also published as the @chedv13/sd-em npm package — ask us for access.

Troubleshooting

The modal says “Unable to enter the drawing”: The Connection ID is wrong or the domain isn’t registered for it. Localhost and staging domains need to be registered too.
ENTD is not defined: The SDK code runs before entd.js has loaded. Load the script without async/defer before your code, or run your code on the script’s load event.
Your site uses a Content Security Policy: Allow entd.tech in script-src and *.entd.tech in frame-src, and api.entd.tech in connect-src.

Have a question or suggestion?

Drawings on any website

Two lines of HTML for a quick start, or the JavaScript SDK when you want your own customer IDs, triggers and styles. The entry form opens in a modal — customers never leave your page.

Access to your site’s HTML or front-end code
Your ENTD Connection ID and the Drawing ID of the drawing to run

Setup

Quick start: two lines of HTML

The embed script finds every element with data-entd-drawing and renders the ENTD button in it — including elements added later by your app.

HTML

<!-- Where the ENTD button should appear -->
<div data-entd-drawing="YOUR_DRAWING_ID"></div>

<!-- Once per page (or once per site in the <head>) -->
<script src="https://entd.tech/em/entd-embed.js"
        data-connection-id="YOUR_CONNECTION_ID" async></script>

Full control: the SDK

Load the library and render the button yourself. Pass your customer’s ID as external_id so entries are tied to your accounts.

HTML

<div id="entd-draw"></div>

<script src="https://entd.tech/em/entd.js"></script>
<script>
  const entd = new ENTD('YOUR_CONNECTION_ID')
  entd.init()

  entd.renderDrawingButton(
    '#entd-draw',
    'YOUR_DRAWING_ID',
    // Your customer's ID and where the entry comes from
    { external_id: 'CUSTOMER_ID', source: 'My Store' },
    { theme: 'dark', size: 'medium', shape: 'pill', text: 'enter_draw' },
  )
</script>

Use your own trigger

Attach the drawing to any element of your page or open it from code.

JavaScript

// Open the drawing modal from your own button
entd.attachDrawingModal('.my-draw-button', 'YOUR_DRAWING_ID', {
  external_id: 'CUSTOMER_ID',
  source: 'My Store',
})

// …or from anywhere in your code
entd.openDrawingModal('YOUR_DRAWING_ID', { external_id: 'CUSTOMER_ID', source: 'My Store' })

Match your brand

Tune the built-in button with CSS variables or turn its styles off completely.

JavaScript & CSS

entd.renderDrawingButton('#entd-draw', 'YOUR_DRAWING_ID', data, {
  styled: false,              // no built-in CSS, only class names
  className: 'my-shop-button',
  text: 'Enter the raffle',
})

/* Or keep the built-in styles and tune the colors */
.sde__button {
  --sde-btn-bg: #111;
  --sde-btn-fg: #fff;
}

Button options

theme — light, dark, auto
size — small, medium, large
shape — rectangular, pill
text — enter_draw, join_giveaway, participate, try_your_luck or any string
logo, fullWidth, className, styled

Data you send

external_id — the customer’s ID in your system. Any stable unique value works; with the embed script, visitors without an ID get an anonymous one.
source — where the entry comes from, e.g. your store’s name or domain.

npm

Building a bundled app? The library is also published as the @chedv13/sd-em npm package — ask us for access.

Troubleshooting

The modal says “Unable to enter the drawing”: The Connection ID is wrong or the domain isn’t registered for it. Localhost and staging domains need to be registered too.
ENTD is not defined: The SDK code runs before entd.js has loaded. Load the script without async/defer before your code, or run your code on the script’s load event.
Your site uses a Content Security Policy: Allow entd.tech in script-src and *.entd.tech in frame-src, and api.entd.tech in connect-src.