Web Surveys 1 — Creating, Configuring & Enabling the Widget

About Web Surveys

The Web platform lets you stitch surveys into your site with needlepoint precision.

Once embedded, a visitor will see your survey (in a Popup or as a Tab) on as many pages as you wish — in a location you'll command. And the survey's timing, sample rate, and color scheme are up to you too! Want a progress bar? You've got it.

For Hem & Stitch we launched a light-periwinkle Popup with rounded buttons in the bottom-left corner of this page; that only appears after a scroll down, then darts away after 11 seconds. Oh, and we only sample 10 out of every 100 visitors. This level of detail is remarkably easy to configure — and it can all be updated in a moment without prerequisite technical skills.

Experience how your Widgets can look!

Head over to our Surveys Web Playground where we showcase 10 survey widgets matched with 10 of the most popular Surveys Templates.

What's the magic? Delighted Surveys uses a low-code approach for super-flexible Web distribution and configuration. Copy and paste a single JavaScript Snippet into your pages and take full control of your survey's Appearance, Targeting, and display Behavior — all within our intuitive configuration panel. (Just click the chevrons to open and and close each section.)

First time setup — as you publish your survey

The instant you publish your survey you'll be whisked to the "Distributions" page.

To configure your Web widget for distribution:

1: Click "Setup" → in the Web tile
2: Jump ahead to About the 'Configure web widget' panel to see all of your options!

Open your Web widget configuration page without spelunking through tabs!

After you set up your Web widget, simply click the "Web icon" on your survey's index card and plop — you'll drop directly to the "Configure web widget" page. Watch this!

Seriously, that's spelunking easy!

Setup and configuration — after you've published your survey

After a survey has been published, you can still:

Set up Web distribution
Update your Web survey's configuration
Enable and disable your Web survey (as needed)

To configure, update, and enable/disable your Web survey:

Open a previously published survey → with a click of its survey card

Click the “Distributions” tab → located in the nav bar on your Results page

Click "Configure" if you:

Are updating your Web widget's appearance, targeting, and display behavior
Need to copy your Javascript snippet

After configuration → use the toggle to "Enable" and "Disable" the Web platform:

"Disabling" stops data collection
"Enabling" starts it back up again

About the 'Configure web widget' panel

Customize your survey's Web widget effortlessly with a few clicks! Our intuitive configuration panel offers 4 sections with all the controls you’ll need:

	Section	Widget configurations
1	Appearance	A. Widget style (Popup or Tab) B. Widget position (left, right) C. Progress bar (show, hide)
2	Targeting	A. Pages (add/delete your website URLs) B. Visitor first eligible after (X number of days have passed) C. Sampling (percentage of visitors to see the survey) D. Throttle (time to pass before the survey is repeated for the same respondents)
3	Behavior	A. Display survey on (Desktop and/or Mobile) B. Display survey when (page loads, on scroll, exit intent, manual) C. Display survey after (X number of seconds have passed)
4	Snippet	A. Copy your Javascript snippet
5	Place on Website	Paste your snippet into your website's html or integrate your surveys through 3rd-party platforms, such as: Shopify Squarespace Google Tag Manager (See Web Surveys 2 — Launching Survey Widgets on your Website for all the details)

About error notifications

If you leave out an essential setting, you'll get red marks in your work! No worries. Just add the necessary info and everything's copacetic.

1. Configure — Appearance

Use the controls in the Appearance section to define your survey, as either a Popup or as a Tab → positioned on the Left or Right of your page. (Change your choices anytime!)

A. Widget style (Popup or Tab)

The Web survey's widget can be configured to display a Popup or a feedback Tab.

Widget	Description	Image
Popup widget	A card containing your embedded survey → that slides onto the bottom left or right of the page
Tab widget	A clickable element anchored to the side of the page. When clicked, the Tab unfurls → and displays your survey

B. Widget position (left, right)

After choosing a widget style, decide if the widget should be positioned on the Left or Right-hand side of the page

C. Progress bar (show, hide)

Decide if you wish to Show or Hide the widget's Progress Bar.

2. Configure — Targeting

Use the controls in the Targeting section to tell Delighted which pages will be allowed to display a survey, who is eligible for a survey, and the conditions under which they'll view it.

	Control	Effect
A	Pages (URLs affected)	Add the URL(s) of the page(s) where you want the survey to appear. Use the wildcard character () as a placeholder for any values, numeric or text, found in an URL. Here are a couple of examples; `https://mysite.com/order//confirm/` will show surveys on both `https://mysite.com/order/1234/confirm/56` and `https://mysite.com/order/9876/confirm/54` `https://mysite.com/dashboard/` will show surveys on both `https://mysite.com/dashboard/new` and `https://mysite.com/dashboard/existing/789`
B	Visitor first eligible	Set the number of days (since the customer first visits your website) until they're eligible to see a survey: For example, if customers are eligible for a survey on their first visit, set the value to 0. If you want them to see the survey 1 month after their first visit, set the value to 30
C	Sampling	The percentage of eligible visitors that will actually view your survey For instance, if 60% is entered, 6/10 visitors will see the survey. (Visitors must also meet the account-wide "Throttling" criteria explained next)
D	Throttling	With throttling, a customer is only eligible for 1 survey within the configured time range across all surveys in your account — so that no individual customer is over surveyed. (The control’s minimum value is 1 week) See Throttling in our Web Surveys 2 — Launching Survey Widgets on your Website article for details

Unlock your Throttle confirmation!

The first time you adjust your Throttle settings, you'll need to click the secret lock and open a dire warning! When you change your Throttle settings, you'll change this setting for every survey in your account — so best to discuss it with colleagues first if you have multiple surveys collecting feedback.

3. Configure — Behavior

Use the "Behavior" controls to tell Delighted when and on what devices an eligible customer should be surveyed.

	Control	Effect
A	Display survey on	Decide which device types are eligible for a survey Desktop and mobile Desktop only Mobile only
B	Display survey when	Visitor views page (ex. display a survey when a customer visits a page, regardless of navigation on the page) Visitor scrolls on page (ex. display a survey when a customer scrolls a set percentage down a page) Visitor exits page (ex. display a survey when a customer begins to navigate away from a page)
C	Display survey after	Number of seconds to wait before displaying a survey on (ex. if a customer should see a survey 10 seconds after a page loads, set the value to 10)

4. Copying your JavaScript snippet for your website

Our developer-friendly JavaScript snippet lets you seamlessly integrate your survey widget into any page on your site. Just copy and paste.

See 5. Embedding the JavaScript snippet into your website for an overview of the "embedding" options.

To copy your Surveys' snippet:

1: Open the "Distributions" section → and click "Configure"
2: Open the "Snippet" menu
3: Select "Copy snippet to clipboard"

5. Embedding the JavaScript snippet into your website

Jump to Web Surveys 2 — Launching Survey Widgets on your Website for full details on how to:

Embed your Web JavaScript snippet on your site
Manage one or more surveys on your website's pages
Access API support
Follow along with the guides to our third-party platforms

We've even thrown in a few helpful FAQs for good measure.

By way of an overview, there are two primary methods used to embed your JavaScript snippet:

	Embedding	Description
A	Within your HTML	Place your survey's JavaScript snippet in an inline script block within your HTML file. (This avoids an extra HTTP request but can clutter your code a bit)
B	Through your third-party platform	Third-party hosts will provide specific instructions for inserting and referencing external JavaScript files — ex. Shopify, Squarespace, and Google Tag Manager Note: Platform providers will have specific placement instructions for your survey's snippet. Visit our Platform Specific Guides to learn more.

A. Within your HTML

To integrate your Surveys' snippet to your website's HTML pages:

1: Access to your website's codebase → typically managed through a Content Management System (CMS) or by directly editing the HTML files
2: Look for the header or <head> section in your website's HTML (ex. file often named index.html or similar)
3: Within the <head> </head> tags, locate an appropriate placement to ensure the snippet executes early in the page load

B. Through your third-party platform

If your website runs on a hosted platform like Shopify, Squarespace, or Google Tag Manager, take a peek at our guides for a quick and easy install:

Note: Wish to embed Delighted Surveys on another platform? Give us a shout and we’ll lend a hand.

Testing Web surveys

You can test and experience Web surveys either before or after you "Enable" the Web widget.

To test the Web widget on your website:

1: Add the Surveys snippet to your site
2: Head to a page on your site where the Targeting URLs match the configuration specified in your "Configure web widget" panel
3: Append ?delighted=test to the end of the URL
4: Reload the page to see your Survey appear

Notes on testing

We recommend testing the Web survey with your developer console open. If you add ?delighted=test,debug to the URL and reload, we will display console messages that share more information about the Behavior rule(s) for any survey Targeted to the URL you’re viewing
Keep in mind that using ?delighted=test will override the eligibility checks and force the survey to display. (Note: If you’re not seeing your Web survey display, double check that you don’t have Targeting logic precluding the survey even being triggered)

Branding your Button Color, Shape & Style options

Branding will allow you to change the color scheme and button style of your survey's widget.

	Button options	Widget samples
A	Beveled
B	Squared
C	Rounded
D	Filled

Color changes

To change the color in your survey's widget:

1: Click the "Branding" tab
2: Use the "Button color" color selection palette to change color of your Web surveys → use a #hex code to precisely set your corporate color
3: Save your changes

Button shape and style (fill) options

To change the shape and style of your buttons:

1: Click the "Branding" tab
2: Use the "Button shape" options to change your widget's buttons → to "Beveled," "Squared," or "Rounded"
3: Use the "Button style" options to fill your buttons with your selected color — or to reverse earlier selections
4: Save your changes

About your logo

If you upload a logo, it will display on Link surveys only and will not appear on your Web surveys, given the limited screen space allowed.

Visit the Branding Surveys article to learn more.

Disabling and Enabling a Web survey widget as needed

To turn off your Web survey — and stop collecting data — click the toggle on the "Web widget" distribution tile to "Disabled."

Click the toggle to "Enabled" when you are ready to display surveys on your Website once again.