Welcome to this week’s installment of our Outside the Checkbox series! Each week we share creative, real-world examples of how people use Alchemer to simplify their lives. In addition, we provide actionable instructions to help you incorporate these use cases into your own life.
If you’re managing an online business, or consulting for one, how do you ensure that you’re making informed decisions that actually scale the business? How do you maintain a solid grasp on who your customers are, and what they think of the experience you’re providing?
While browsing the web, have you ever come across a pop-up survey that asks what you think of the online experience you’re having?
These pop-up surveys are called Website Intercepts, and they are an extremely useful tool for gathering relevant feedback from potential customers. You can leverage the data collected from Website Intercepts to make changes that result in increased conversion rates.
Below are examples of the different kinds of Website Intercepts.
If you’ve already looked at one example, be sure to close it before moving on to the next in order for the Website Intercept to show properly.
Below is a step-by-step guide for how to implement Website Intercepts using Alchemer.
How To Create Website Intercepts using Alchemer
*The Website Intercept feature is available as an add-on, and can be purchased HERE.
Step #1: Create a Beacon
In order to set up a Website Intercept survey you will need to place a Beacon (a piece of JavaScript code) onto the pages of your website where you want the survey to appear. You will need access to edit your website code, or access to someone who can!
A Beacon contains the Javascript code that you will paste at the bottom of all pages in your site that you want to track. (*Note: If you are on a multi-user account, you must be an Administrator to create or edit Beacons.)
First, click Account > Account Settings > Beacons.
Then, give your new Beacon a Name. We recommend having this name reference the site and page(s) you plan on using with this Beacon.
Input the domain(s) of the site(s) where you will be installing this Beacon. Subdomains must be explicitly declared (no wildcards). Be sure to input only the domain name (everything up to .com), and not specific page paths. Please be aware that this field has a character limit of 255.
By default, a Beacon is active upon creation. You can disable the Beacon at any time.
Next, copy the embed code for this Beacon. You will then paste it at the bottom of the source code of all pages you want to track.
Step #2: Create a Website Intercept Link
Now it’s time to set up the link between the Beacon and the survey you want to appear!
Go to the Share tab of your survey and click Website Intercept Survey (located on the bottom-half of the Share page). You’ll want to give this link a memorable name.
Now choose the Invite Type.
- Top/Bottom Banner – This will create a banner that is positioned statically at the top or bottom of the targeted page. If you choose a Top or Bottom banner, you’ll also have an option to Fix to, which will anchor the banner to the top or bottom of the browser window instead of the page contents.
- Modal Dialog – This will create a ‘pop-up’ modal window inside the targeted page. Pop-up blockers will not block this type of interaction.
- Inline – This can target a specific CSS selector to make the Intercept appear inline on the chosen page.
You can customize the colors of the Background of the banner/pop-up, the Invite, and the Link text by clicking on the color next to each option. (If you need to make a lot of style customizations CSS can be added on the Advanced tab.)
Now it’s time to write your Invite Text. This text should encourage your website visitors to engage with your survey. This field supports basic HTML and inline CSS. (CSS can also be added to the Advanced tab if you have a lot of style customizations.)
Your Survey Link Text will be what the visitor actually clicks to get the survey. This field supports basic HTML and inline CSS. (CSS can also be added to the Advanced tab if you have a lot of style customizations.)
Choose your previously-created Intercept Beacon from the menu. By default, this link will be open – you can come back here to close it!
Step #3: Set Up Advanced Controls
Once you have the initial setup complete, you now need to determine how and when the Intercept will appear to visitors. Click on the Advanced tab to get started!
The logic builder allows you to select what actions will trigger the Intercept to appear. You can add multiple conditions or groups of conditions. You can choose from the following options for a logic trigger:
- Last Offered this Survey (days ago)
- Percent Chance (1-100)
- Number of Site Visits
- Page(s) Visited by User
- Time on Page (seconds)
- Time on Site (seconds)
- Browser
- Device
- Advanced
- CSS Selector Clicked by User (targets a specific CSS class name on your site that the respondent would interact with. This is on-click only)
- Cookie (has to be setup on the same domain as the Beacon)
- Custom Data
For the sake of an example, let’s say you only wanted to present a survey to 20% of the visitors to your site that are using desktop computers. Here are the triggers needed for that intercept:
You can…
- Set a Quota of responses to collect, as well as set an Open/Close date for the Intercept.
- Define any URL Variables you want to pass along with responses collected by the Intercept.
- Specify a Language for the survey to display in. If set to Auto the Intercept will automatically detect the language of the respondent’s browser and, if a translation is available, it will present the survey to them in that language.
Finally, use the Custom JavaScript and Custom CSS fields to change the intercept invite styles or behavior. If you wish to style the survey use the Style tab controls or add Custom CSS via the Style tab.
If you want surveys displayed via an Intercept link to use a different theme than the one you’ve chosen in the Style tab, you’ll find the override options on the Themes tab. This can be useful if you want to brand the survey differently depending on which section of your website a visitor happens to be in when they launch the Intercept survey. This could be implemented with multiple Intercept links, each triggered by different page path logic, and each with different theme overrides.
Step #4: Test Your Website Intercept
Once you are done with the setup, it’s time to test! Click over to the Test tab and input the domain and page path where you’ve pasted the Beacon code. You can also switch from https:// to https:// depending on your needs.
Now click Launch Test to preview your page with the Intercept! This will bypass any logic you have set up, and force the Intercept invite to show.
A successful Intercept will look like one of the examples from the beginning of this post, depending on the invite type you chose.
Step #5: Set Up Advanced Logic Triggers
A) CSS Selector Clicked by User
You can target a specific CSS selector that a visitor on your page will interact with to trigger an Intercept. Imagine a user interacts with a specific button on a targeted page and you want to ask why they did what they did. Perhaps they clicked a Back button, taking them away from a checkout page and you want to know why they didn’t proceed.
You could use the CSS selector of that button (.backButton) to target that specific interaction.
B) Cookie
Many websites create session cookies that contain information about the usage of the site (did you add items to your shopping cart, have you logged in to the application) and you can have an Intercept appear based off of a cookie value. An example of a cookie would look something like this:
document.cookie =
‘sgcookie=testcookie; expires=Thu, 26 July 2014 23:42:00 UTC; path=/’
An Intercept set to show when the cookie sgcookie is set to testcookie would look like this:
C) Custom Data
Custom Data attributes stored on a page can also be used to trigger the Intercept. In this case, a custom value for cart that is set to item3 would trigger the survey. These are attributes that you or your web developer will have to program into the site.
To add custom data, simply call sg_beacon(‘data’, ‘name’, ‘value’); right after the sg_beacon(‘init’, …); call in the default beacon code.
Stay tuned for future installments of our Outside the Checkbox series in the weeks to come!
Read Outside the Checkbox Vol. 1: Expense Reports
Read Outside the Checkbox Vol. 2: Event Registration and Payment Collection
Read Outside the Checkbox Vol. 3: New Visitor Check-In Kiosks
Read Outside the Checkbox Vol. 4: Streamlining Organization-Wide Requests
Do you have a creative or interesting way that you use Alchemer? We’d love to hear from you! Sound off in the comments below, or feel free to send a note to [email protected].