Add DolyOne apps to your website
Show your DolyLink or a DolyForm right inside your own site, so visitors never leave it. It works with any website: WordPress, Webflow, Wix, Shopify, Squarespace, Notion or one you coded. Most people only need to copy and paste.
The easiest way: paste your link
In WordPress, Notion, Ghost and other tools that support embeds, paste the address of your DolyLink or your form on its own line, or in an embed block. It turns into the real thing.
Copy and paste two lines
If your site lets you add HTML (often called a code block, an HTML block or an embed element), paste this where you want it to appear. Replace yourname with your username or the address of your DolyLink.
Your DolyLink
<div data-dolylink="yourname"></div>
<script src="https://dolylink.futurevelvet.com/embed.js" async></script>A DolyForm
Use the end of your form's address: for dolyform.futurevelvet.com/sam/contact that's sam/contact.
<div data-dolyform="yourname/your-form"></div>
<script src="https://dolyform.futurevelvet.com/embed.js" async></script>You'll find these ready to copy, with your own address filled in, under Share in DolyLink and in DolyForm.
As a button that opens a popup
<button data-dolyform-popup="yourname/your-form">Contact us</button>
<script src="https://dolyform.futurevelvet.com/embed.js" async></script>Make it fit your site
The box you paste is yours: give it a width, round corners, a shadow, with your own CSS classes or Tailwind. The app inside fills it.
<div data-dolylink="yourname" data-transparent
class="max-w-md mx-auto rounded-3xl shadow-xl overflow-hidden"></div>.my-links {
max-width: 480px;
margin: 0 auto;
border-radius: 24px;
overflow: hidden;
}Add any of these to the box to change how it behaves:
| Add | What it does |
|---|---|
data-height="auto" | Grows and shrinks with what's inside, so there's never a scroll bar. DolyLink does this unless you say otherwise. |
data-height="600" | A fixed height in pixels. Forms use 560 unless you set one. |
data-transparent | Drops the page background, so your site's own background shows through. |
data-title="Book a call" | What screen readers announce for the embed. |
No code allowed? Use an iframe
Some site builders only accept an iframe. Add ?embed=1 to your address and set a height:
<iframe src="https://dolylink.futurevelvet.com/yourname?embed=1"
title="My links" loading="lazy"
style="width:100%;height:640px;border:0"></iframe>For developers
The script finds every element with data-dolylink, data-dolyform or their -popup versions, and puts a framed page in it. It's small, loads asynchronously, and never touches anything else on your page.
Events
Events bubble from your element: dolyform:submitted when someone sends a form, dolylink:click when someone taps a link (with its label and address inevent.detail).
document.querySelector("[data-dolyform]")
.addEventListener("dolyform:submitted", () => {
// Thank them, open a calendar, track a conversion...
});React, Vue and other frameworks
export function Links() {
return <div data-dolylink="yourname" className="rounded-3xl" />;
}
// Load https://dolylink.futurevelvet.com/embed.js once, in your page's <head>.
// New embeds are picked up as they appear. window.DolyEmbed.mount() forces it.Security
Embeds only show what's already public: your published DolyLink, your live forms. Answers go straight to DolyForm over HTTPS; your site never sees them unless you add a webhook in DolyForm.