Surveybox Surveybox
Start Free Trial

Integrating Survey Platform Widget SDK into a JavaScript Application

Created by Surveybox.io •April 27, 2024 8:10 AM

Integrating Survey Platform Widget SDK into a JavaScript Application

To integrate the survey platform widget SDK into a JavaScript application, follow these steps:

1Include the SDK scripts and styles in your HTML file:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Fonts -->
    <link
      href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap"
      rel="stylesheet"
    />

    <!-- Styles -->
    <link rel="stylesheet" href="https://dev.surveybox.io/css/app.css" />

    <!-- Scripts -->
    <script src="https://dev.surveybox.io/js/app.js" defer></script>
  </head>
  <body>
    <div id="app" class="min-h-screen">
      <!-- Include the widget component with necessary props -->
      <global-web-form-preview
        api_key="06c7c3b0-cf22-42b0-8fa4-24c3d42eaf67"
        page_name="home"
        email="shafeeq.ahmed541@gmail.com"
        request_url="https://dev.surveybox.io"
      ></global-web-form-preview>
    </div>
    <!-- Include the widget SDK script -->
    <script src="https://dev.surveybox.io/js/widget.js" defer></script>
  </body>
</html>

2Configure the widget component with your API key, page name, email, and request URL:

  • api_key : Your API key provided by the survey platform.
  • page_name : The name of the page where the widget is embedded (e.g., "home").
  • email : The email of the user accessing the page.
  • request_url : The URL of the survey platform's API.

3Initialize the widget SDK:

The widget SDK script (widget.js) should be included at the end of the <body> tag to ensure it loads after the DOM has loaded. The SDK will handle the rendering and functionality of the survey widget based on the configuration provided in the <global-web-form-preview> component.

4Additional Configuration:

  • Ensure that the api_key is kept secure and not exposed in client-side code.
  • Customize the styling of the widget by modifying the CSS classes or providing custom styles.
  • Test the integration thoroughly to ensure the widget functions as expected in your application.

That's it! Your JavaScript application should now be integrated with the survey platform widget SDK, allowing you to collect feedback from your users.

Ready to Get Started?

Follow the installation steps above to integrate the Survey Platform Widget SDK into your JavaScript application and start collecting valuable user feedback today.