Integrations
These paths are organized around the kind of site you run. If you have a static website, start with the hosted widget. If you run a JavaScript app, use the custom browser form. If you control the server, use server-side posting. If you use a CRM or posting engine, start with the direct API path. If you use WordPress, start with the plugin path.
For static websites, landing pages, and page builders that need a working form with the least setup.
For custom HTML + JavaScript, React, Vue, Angular, and Svelte projects that want the form to live inside the existing UI.
For PHP, Node/Express, ASP.NET Core, MVC, Razor Pages, Blazor, or minimal APIs when you want the key to stay on your server.
For CRMs, webhook platforms, or posting engines that can send custom headers and post lead payloads as JSON, XML, or form data.
For WordPress site owners and admins who want an installable plugin with a settings page and shortcode support.
Solution Paths
This is meant to be a solutions menu, not a theory lesson. Match your website type to the path below, then open the guide that fits.
| If You Have | Recommended Path | Guide | Why It Fits |
|---|---|---|---|
| Plain HTML | Hosted widget | Hosted Widget guide | No JavaScript build pipeline is required, and the widget handles case types, validation, and submission. |
| HTML + JavaScript | Custom browser form | HTML + JavaScript guide | You can keep the form inline with the page and style it however you want. |
| React | Custom browser form or thin wrapper component | React guide | The component can live directly inside the SPA and use the site's existing state and styling patterns. |
| Vue | Custom browser form or thin wrapper component | Vue guide | Vue and Nuxt sites can keep the form inside the app shell and theme it locally. |
| Angular | Custom browser form or thin wrapper component | Angular guide | Angular teams can use reactive forms, typed services, and token-driven component styles. |
| Svelte | Custom browser form or thin wrapper component | Svelte guide | Svelte keeps the browser integration very light while still fitting the host theme. |
| PHP | Server-side adapter | PHP guide | PHP can keep the key private and post to the partner API with cURL. |
| Node / Express | Server-side adapter | Node / Express guide | Express can validate the payload and forward it with the key stored in env vars. |
| ASP.NET Core / MVC / Razor Pages / Blazor | Server-side adapter | ASP.NET Core guide | The .NET web stack can keep the key private whether you post from a controller, page handler, service, component, or minimal API endpoint. |
| CRM / Posting Engine | Direct API posting | CRM / Posting Engine guide | If the platform can send X-Api-Key and choose JSON, XML, or form data, it can submit leads without a browser widget. |
| WordPress | Plugin / shortcode | WordPress guide | WordPress can store settings, render the form, and submit from PHP without exposing the key. |
The widget and starter files are designed around CSS variables so the form can either inherit the host site's tokens or accept explicit overrides on the wrapper element. Use the Widget Configurator to preview colors live and copy the snippet.
#dp-lead-widget,
.dp-affiliate-form {
--dp-affiliate-bg: #ffffff;
--dp-affiliate-text: #102033;
--dp-affiliate-muted: #5b6677;
--dp-affiliate-border: rgba(16, 32, 51, 0.14);
--dp-affiliate-input-bg: #ffffff;
--dp-affiliate-input-text: #102033;
--dp-affiliate-input-border: rgba(16, 32, 51, 0.16);
--dp-affiliate-accent: #0f766e;
--dp-affiliate-accent-hover: #115e59;
--dp-affiliate-button-text: #ffffff;
--dp-affiliate-radius: 18px;
--dp-affiliate-shadow: 0 20px 45px rgba(16, 32, 51, 0.12);
}Once you know which path matches your site, the next step is simple: open the guide and download the starter that belongs to that solution.