Skip to content
Questionnaires

Branding and inline embeds

Use a hosted survey inside your website while keeping its published branding. Custom branding and embeds require the workspace’s corresponding plan features (Pro by default).

Configure branding

Edit page.theme as part of the saved survey draft. Use the SurveyTheme schema in the API reference for supported colors, fonts, shapes and logo fields. Include meaningful logo alt text. Custom CSS, scripts and remote fonts are not supported.

Text colors require at least 4.5:1 contrast against the background; accent colors require at least 3:1. The console’s paired light/dark palettes provide a starting point. Check both modes before publishing.

Apply the updated appearance in this order:

  1. Save the draft.
  2. Validate the saved draft and resolve any errors.
  3. Publish it to apply the appearance to new visits.

See creating surveys for the API requests. Hosted surveys and embeds use the published appearance. Platform branding can be removed only when that feature is included in the workspace’s plan.

Add a survey to your website

  1. Publish the survey.
  2. In Share & track → Embed survey, enable embedding and add your website’s exact HTTPS origin, such as https://www.example.com. Add each intended website separately.
  3. Choose the tracked link, if needed, and save.
  4. Copy the generated iframe snippet into your page. Keep the generated survey URL intact and provide a descriptive iframe title.
  5. Keep a visible Open survey link beside the embed so visitors can open it in a full page.

Use the generated snippet rather than building an embed URL by hand. For a website builder or CMS, insert it into a custom HTML block that permits iframes. Your site’s content security policy must permit frames from the survey host.

Responsive sizing

Give the iframe a width of 100% and enough initial height to make it usable. The generated snippet can include the optional /widgets/v1.js loader from the survey host for automatic resizing. Load it once per page and retain the snippet’s data-questionaire attribute. If scripts are blocked, the fixed-height iframe and full-page link remain available.

Test the embed on narrow screens and with a keyboard. Avoid a fixed-width parent container, and check that the iframe and fallback link have accessible names.

Optional completion notification

If completion notifications are enabled in the embed settings, the widget loader emits questionaire:completed on the iframe element. Use this to update nearby interface copy, such as a thank-you message.

const frame = document.querySelector('iframe[data-questionaire]');
frame?.addEventListener('questionaire:completed', () => {
  document.querySelector('#survey-message').textContent = 'Thank you for participating.';
});

The notification contains no answers or personal information. It is a UI notification, not proof of eligibility or a basis for payments or rewards. Keep the generated loader in place rather than implementing a custom iframe messaging protocol.

Troubleshooting

  • Frame blocked: Check that the exact website origin is allowed and your website permits the survey host in its frame policy.
  • No automatic resizing: Confirm the generated loader is included once, scripts are permitted, and the iframe keeps its data-questionaire attribute.
  • Embed unavailable: Confirm embedding is enabled and included in the workspace’s plan. Keep the full-page link visible.
  • Old appearance: Confirm that the latest draft was published and test a fresh visit.

For collected data, use the authenticated results and reports API.