Implement a Custom Call-to-Action (CTA) to open your embed surveys
In today's digital age, feedback from users and customers plays a crucial role in improving products and services. Businesses, websites, and applications are constantly seeking ways to engage with their audience and gather valuable insights. One effective method to achieve this is by integrating feedback surveys directly into the user experience. In this article, we'll explore a code snippet that demonstrates how to embed a user-friendly feedback survey widget into a web page and provide a custom link for users to access it.
The code provided below is an HTML template that includes JavaScript and CSS to integrate a feedback survey widget into a webpage. Let's break down the code and understand how it works.
Embedding the Survey Widget
The primary functionality is encapsulated in the `sparrowLaunch` function, which is responsible for embedding the feedback survey widget. Here's a brief overview of how it works:
function sparrowLaunch(opts) {
// ...
r.SS_WIDGET_TOKEN = "tt-82baDR2oV968GVp9jrznZ8";
r.SS_ACCOUNT = "bricks.surveysparrow.com";
r.SS_SURVEY_NAME = "Product-Feedback-Survey";
// ...
n.src = ["https://", "bricks.surveysparrow.com/widget/", r.SS_WIDGET_TOKEN, "?", "customParams=", JSON.stringify(opts)].join("");
// ...
}
The `sparrowLaunch` function initializes various parameters, including the survey widget token, the account name, and the survey name.
It creates a new script element (`<script>`) with a source (`src`) attribute pointing to the SurveySparrow widget's URL. This URL includes the widget token and any custom parameters (specified in the `opts` object) required for your survey.
Custom Link to Trigger the Survey
To make the survey accessible to users, a custom link is provided in the HTML. Here's the relevant
HTML code:
<a href="#" onClick="handleCustomLinkClick()"> Click here to share feedback</a>
When users click on the "Click here to share feedback" link, the `handleCustomLinkClick` JavaScript function is triggered.
Handling the Click Event
The `handleCustomLinkClick` function is defined as follows:
function handleCustomLinkClick() {
SparrowToggleEmbed();
}
This function calls `SparrowToggleEmbed()`, which is a part of the SurveySparrow JavaScript library. It toggles the visibility of the embedded survey widget, allowing users to open and close the feedback survey seamlessly.
Custom CSS Styling
Additionally, the provided CSS styles hide the default "open survey" button that may come with the survey widget:
/* hide the default open survey button */
.ss-survey-launch-button {
display: none !important;
}
This ensures that the user experience is tailored to the web page's design and that the survey widget seamlessly integrates with the rest of the content.
In conclusion, integrating a feedback survey widget into your web page using the provided code allows you to gather valuable insights from your users while ensuring a smooth and intuitive user experience. Customization options are available to adapt the survey to your specific needs. By actively seeking feedback and engaging with your audience, you can continuously improve your products and services.
Sample code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample HTML</title>
<style>
/* hide the default open survey button */
.ss-survey-launch-button {
display: none !important;
}
</style>
</head>
<body>
<h1>Sample HTML</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non dictum diam, tristique laoreet nunc. Mauris at nunc vehicula lacus feugiat elementum eu id lectus. Ut eget condimentum massa, non auctor arcu. In accumsan turpis sed tincidunt cursus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed tincidunt justo vitae orci posuere facilisis. Praesent iaculis, mauris eu dictum rhoncus, diam metus vestibulum lectus, non efficitur augue odio at sem.
Donec orci diam, iaculis convallis dignissim vel, convallis quis risus. Fusce sodales nisi sagittis, posuere orci quis, maximus dui. Aenean ut pellentesque mauris. Duis ultricies maximus ante, eget hendrerit lacus condimentum et. Duis sit amet odio mi. Donec quis congue ex. Donec vel quam sodales, pharetra tortor eget, semper orci.
Praesent suscipit augue a dapibus tincidunt. Etiam id tincidunt arcu. Suspendisse sit amet dolor scelerisque, fermentum nisl in, sollicitudin est. Quisque aliquet tristique dolor vitae ornare. Phasellus tempus, felis dictum malesuada pretium, nunc risus imperdiet diam, at elementum ipsum sem et nulla. Donec iaculis quam consequat aliquam vulputate. Donec eget ex nec erat sollicitudin sagittis et sed tellus.
In eget enim turpis. Aenean sodales justo sapien, in euismod sem congue sit amet. Nunc tellus mi, tempus et tellus quis, mollis mollis augue. Cras tincidunt eros sem, imperdiet eleifend ex maximus quis. Maecenas placerat vestibulum elit ut viverra. Curabitur eu ante eget nisl iaculis consequat. Donec mollis interdum justo vitae aliquet. Aliquam eget ex gravida, congue leo vitae, luctus lacus. Ut malesuada sagittis turpis et iaculis. Pellentesque eget dui suscipit risus facilisis vulputate. Curabitur dapibus pretium iaculis. Duis porta rhoncus viverra.
Got any questions? we are just a chat away..