Inline
By default the SDK is an inline block on your page.doola.create() returns a <doola-embed> element that takes the full width of its container. Its height follows the content as the founder moves through the wizard, so your page scrolls, never the iframe.
- Give the container the width you want. Below 768px the wizard switches to a compact step indicator.
- Leave the height alone. The element reserves 160px until the first screen renders, then grows. Hidden with
display: noneand shown again, it keeps its height. - When the founder opens a new step or section, the SDK asks your page to scroll it into view.
Full screen on phones
On a phone, an inline iframe can end up behind the on-screen keyboard. So with the defaultpresentation: { mode: 'auto' }, the SDK switches to a full-screen overlay when the viewport is 640px wide or narrower:
- the iframe covers the whole viewport, above everything else on your page;
- your page stops scrolling while it is open, and the iframe scrolls itself;
- it returns to inline when the viewport grows past 640px.
{ mode: 'fullScreen' }:
onFormed.
If the iframe never starts, for example because a CSP blocks it, the SDK releases the overlay and the scroll lock before it reports
render_error. The founder is never left on a blank screen they cannot leave.Language
The SDK is in English.locale accepts a BCP 47 tag and doola.update({ locale }) changes it later, so your integration will pick up new languages without a code change once they ship.
Your own domain
By default the iframe is served fromsdk.doola.com. To serve it from a subdomain of yours, such as formation.example.com, contact doola. doola adds the domain to its CDN and issues its certificate first. Then pass it as origin:
origin a constant in your code. The SDK posts the founder’s session token to that origin, so never build it from a URL parameter or user input. Update your CSP frame-src to the new origin.