Embedding the widget¶

You embed the widget in three steps:

■ a script in the head area of the page
■ an element at the position of the logo
■ a verification of the token on your server

Changes to the DNS are not necessary.

The following requirements must be met:

☑ You created a sitekey. See Create the first sitekey.
☑ You know the public sitekey and the secret. Both are shown in the Details view of the sitekey. See Details view.
☑ You can edit the HTML and the server-side source code of your website.

Step 1: Embed the script¶

Add this element to the <head> area of your page:

<script src="https://cdn.eu-captcha.eu/verify.js" async defer></script>

Note

If your website sends a Content Security Policy, then it must permit the https://cdn.eu-captcha.eu and https://api.eu-captcha.eu addresses. Without this permission, the browser blocks the widget. See Content Security Policy.

Add this element at the position where the Myra logo must be shown, usually in the form to protect:

<div class="eu-captcha" data-sitekey="a1b2c3d4-0000-0000-0000-000000000000"></div>

Replace the value of data-sitekey with your public sitekey.

Step 3: Verify the token on the server¶

Verify the token on your server before you process the form:

POST https://api.eu-captcha.eu/v1/verify
Content-Type: application/json

{
  "sitekey": "a1b2c3d4-0000-0000-0000-000000000000",
  "secret": "a1b2c3d4••••",
  "token": "TOKEN_FROM_THE_WIDGET"
}

If the response confirms the success, process the transmission. If it does not, refuse the transmission.

Warning

The secret is only for your server. Never show it in the HTML or in JavaScript.

Platform-specific instructions¶

For the usual platforms, there are libraries and extensions that do these three steps. See Integration.

See Testing the integration.

Embedding the widget¶

Step 1: Embed the script¶

Step 2: Add the widget element¶

Step 3: Verify the token on the server¶

Platform-specific instructions¶