Embed Widgets Using Basic Frontend
Cut in from zoom transcript
Key takeaways A tutorial on creating a simple front-end for embedding Qrvey A widgets using pure JavaScript and Fetch API The process involves creating an HTML file with a placeholder div for the widget A Node.js backend service is used to generate JWT tokens for secure widget embedding The implementation uses three key components: custom HTML tag, JSON configuration object, and launcher JavaScript Testing is done using a simple HTTP server rather than opening the file directly
Embed Widgets Using Basic Frontend
Widget Embed Tutorial
The following tutorial video shows how to embed a Qrvey widget into a basic Javascript frontend.
Tags: Widgets, Embedding, Frontend
Discussed topics Creating a basic front-end for Qrvey A widget embedding Natan Cohen, Head of Customer Success at Qrvey A, demonstrated how to create a simple front-end using pure JavaScript without frameworks. Details Natan: Created a new directory called "curve-client" and an index.HTML file Natan: Added standard HTML elements and a div placeholder to inject the Qrvey A widget Natan: Created a JavaScript function called embedWidget to handle the widget embedding Natan: Demonstrated how to create a globally accessible JSON config object using window.QrveyADashboardConfig Natan: Explained that sensitive parameters like API key should not be exposed client-side Conclusion A simple HTML structure with a placeholder div is needed as the foundation JavaScript is used to dynamically create and configure the widget elements Implementing secure widget authentication The tutorial covered how to securely implement authentication for the widget using JWT tokens. Details Natan: Explained that sensitive properties (API key, app ID, user ID) should be handled server-side Natan: Showed how to configure the widget to accept a JWT token using the QVtoken property Natan: Demonstrated using the Fetch API to call a Node.js backend REST API for JWT token generation Natan: Implemented error handling for the token retrieval process Conclusion JWT tokens provide secure authentication without exposing sensitive credentials The Fetch API can be used to retrieve tokens from a backend service Asynchronous functions are required when using await syntax with Fetch Required components for widget embedding Natan explained the three essential components needed to embed a Qrvey A widget. Details Natan: Identified the custom HTML tag (curve-dashboard) as the first required component Natan: Showed how to create and configure the JSON widget configuration object Natan: Explained the need for launcher JavaScript to process the custom tag Natan: Recommended placing reference JavaScript files before the body close tag Conclusion Three components are required: custom HTML tag, JSON configuration object, and launcher JavaScript The settings attribute of the custom element must reference the configuration object Testing the implementation The tutorial demonstrated how to properly test the front-end implementation. Details Natan: Explained that opening the file directly in a browser is not a real-world testing approach Natan: Showed how to install a simple HTTP server using npm: sudo npm install --global http-server Natan: Started the HTTP server in the project directory Natan: Verified the Node.js backend was functioning by checking token generation Natan: Successfully tested the front-end by accessing localhost:8080 Conclusion Testing should be done using an HTTP server rather than opening files directly The implementation successfully embedded the Qrvey A dashboard widget Action items Viewers Watch the tutorial on creating a backend service in Node.js to return security tokens (if not already done) Create a directory for the client-side code Create an index.HTML file with the necessary structure Implement the embedWidget function with Fetch API integration Install and use an HTTP server for testing Ensure the Node.js backend is functioning before testing the front-end