Embedding forms on your website

Copy the embed code from Forms in Bokning & Schema Online (the Embed code button on a published form), or from the publish window in eboka. It is one line:

<script async src="https://eboka.se/api/public/forms/K7M2P/embed.js"></script>

Paste it in your page's HTML where the form should appear. The script places the form right there, sizes it to fit its content as the customer moves through it, and passes your campaign tags on to the form. Nothing else is needed.

Choosing the spot with a placeholder

Some tools do not keep a script where you paste it — Google Tag Manager, or a site builder's "header/footer code" field. The form would then appear at the bottom of the page. Mark the spot with an empty placeholder instead, and load the script anywhere on the page:

<div data-eboka-form="K7M2P"></div>

<!-- anywhere on the page, or from Tag Manager -->
<script async src="https://eboka.se/api/public/forms/K7M2P/embed.js"></script>

The code in data-eboka-form is the one in the script address. Every placeholder with that code gets the form, so the same form can appear more than once on a page. For the page that lists all of a company's forms, use <div data-eboka-forms-page="…"></div> with its own script from Share public page.

The iframe code (legacy)

The iframe code is still offered for site builders that do not allow scripts. It shows the form at a fixed height of 900 px, and none of the tracking below works with it: no campaign tags from your page, no events, no redirect to your own page.

You do not add tags to the embed code. Add them to the links that bring visitors to your page — your ads, newsletters and posts:

https://www.example.com/quote?utm_source=meta&utm_campaign=summer

When a visitor arrives through that link, the script reads the tags from your page's address and passes them to the form. When they submit, the values are saved with the request and shown in the notification email and on the request in Bokning & Schema Online, under Tracking.

These are the only tags that are passed on. Anything else in the address is ignored:

Two more values are saved automatically, without any tags:

• Page — the address of the page the form is on.
• Came from — the page the visitor arrived from, such as a search engine.

Good to know:

• Both addresses are saved without their query string, and other parameters are never passed on, so personal details in an address (such as ?email=) are not stored.
• Each value is trimmed and cut to 200 characters. A request without tags works as normal.
• The tags must still be in the address when your page has loaded. If your site redirects (for example from example.com to www.example.com) and drops the query string on the way, the tags are lost. Open a tagged link and check the address bar.
• The address is read once, when the form is placed. On a single-page site, tags added by in-page navigation afterwards are not picked up.
• Tags on the form's share link also work, e.g. https://eboka.se/form/K7M2P?utm_source=newsletter.

The script reports what happens in the form as events on your page's window. Listen for eboka:form.submitted to record a conversion — it fires once for every request that was saved.

event.detail also holds source ("eboka-form"), version (1), type and publicToken (the form code), so you can tell several forms apart. Events never contain the customer's name, contact details or answers. A failed save reports one of: rejected, not_available, rate_limited, server_error, network_error, unknown.

Meta Pixel

<script>
  window.addEventListener('eboka:form.submitted', function (event) {
    fbq('track', 'Lead', { content_name: event.detail.data.formName });
  });
</script>

Google Analytics 4

<script>
  window.addEventListener('eboka:form.submitted', function (event) {
    gtag('event', 'generate_lead', {
      form_name: event.detail.data.formName,
      transport_type: 'beacon',
    });
  });
</script>

Add the listener on the same page as the form, after your Pixel or GA4 tag has loaded. With Google Tag Manager, push the event to the data layer instead and build the tag there:

<script>
  window.addEventListener('eboka:form.submitted', function (event) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({ event: 'eboka_form_submitted', formName: event.detail.data.formName });
  });
</script>

Instead of the thank-you message, a form can send the visitor to a page on your site. Choose Redirect to a page under After submit in the form builder. The address must start with https:// and may contain:

https://www.example.com/thanks?ref={referenceCode}

A thank-you page is also the simplest way to count conversions without code: measure visits to it in your analytics tool.

• The form does not appear. Open the browser console. A message starting with eboka (form): explains why — usually the form is not published, or the code is wrong.
• The form appears at the bottom of the page. Your site or tag manager moved the script. Use a placeholder (section 1).
• Your site has a Content Security Policy. Allow https://eboka.se in both script-src and frame-src.
• No events and no tags. Check that the page uses the script code, not the iframe code.

The events follow version 1. New events or fields may be added; nothing is renamed or removed without a new version.