Datadog Setup Integration Block for React

No. Nothing connects, validates or stores anything: the block checks only what it can see, the length (32 for an API key, 40 for an application key, as Datadog makes them) and that every character is hexadecimal. To check them for real, call Datadog's key validation from your own server when the visitor finishes, and never put the keys in the page. Finish setup clears both fields, and the polite line says "Nothing leaves this page."

Each entry in SITES carries the address you sign in at and the API host that follows from it (US1 api.datadoghq.com, US3 api.us3.datadoghq.com, US5 api.us5.datadoghq.com, EU api.datadoghq.eu, AP1 api.ap1.datadoghq.com). Choosing one rewrites the two lines under the picker, the progress strip's first cell and the host in the sample request, so the visitor sees the address their data would go to. Add a site by adding an entry.

Nothing is sent. The button is available once both keys look right, and pressing it prints the request Aftermark would make: a POST to your site's /api/v1/events with the DD-API-KEY header and a small event body (a title, some text, alert_type: info and a tag). The key in the header is shown as a placeholder, never as what was typed. The polite line says "Test alert prepared in this demo. Nothing was sent to Datadog." The box is a focusable, scrollable region, so a long line can be read by keyboard.

Finish setup stays unavailable until both keys are complete and the test alert has been prepared, and the line under it says what is missing. Editing a key afterwards takes the test alert back to "Not sent yet", because the request would differ. Finishing says "Connected in this demo", clears both keys and swaps the button for a quiet Disconnect, never a red one, which returns the flow to the start.

The buttons use onClick, and each field's label points to its input with htmlFor and an id.

The segmented control, the password fields and the strip behave the same on every base.

Below lg each band stacks its title over its control, the strip's three cells stack and the two keys sit one under the other, with the meter under each field. Hosts, keys and the sample request keep their left-to-right order in a right-to-left layout while the bands flip. The header fades up once on load; the meters ease and the strip updates without motion when reduced motion is on.