introduce
Widgets are a powerful way to embed interactive functionality into static web pages. They allow developers to build modular components that can be reused across multiple websites, reducing redundancy and improving maintainability. A common scenario in widget implementation is the need to pass variables (such as configuration settings, API keys, or user-specific data) from a static page to the widget.
In this blog, we’ll explore how to safely pass variables from static pages to widgets, outline common use cases, and provide practical implementation examples.
Why pass variables from static page to widget?
Imagine building a reusable chat widget, analytics widget, or payment module. These widgets may require the following data:
- A unique key or token used for authentication.
- User-specific ID for personalization.
- A random number used to ensure unpredictability or prevent cache conflicts.
By dynamically passing variables, developers can:
- Adapt widgets to different environments.
- Simplify gadget reuse across multiple sites.
- Reduce hardcoding and enhance maintainability.
Implementation: passing variables step by step
- Build a static HTML page – First, use JavaScript to dynamically generate a random number and assign that number to the data property of the location where the widget will be rendered.
- So modify the html file accordingly:
Random Number Widget
- In your React application, get the data-random-number attribute from the root element and change the code in the App.tsx file:
import { useEffect } from 'react';
import { Widget, addResponseMessage } from "react-chat-widget";
import "react-chat-widget/lib/styles.css";
function App() {
useEffect(() => {
const randomNumber = document.getElementById("widget-root")?
.getAttribute("data-random-number");
console.log("Random number from static page:", randomNumber);
// Display the random number in the chat widget or use it as needed
addResponseMessage(`Welcome! Your random number is: ${randomNumber}`);
}, []);
const handleNewUserMessage = (newMessage: string) => {
console.log(`New message received: ${newMessage}`);
};
return (
- Finally, bundling the widget - Use Webpack to bundle the React widget into a bundle.min.js file, which can be included in static pages, and change the webpack.config.js file accordingly:
const path = require("path");
module.exports = {
entry: path.join(__dirname, "src/index.tsx"),
output: {
path: path.join(__dirname, "dist"),
filename: "https://dev.to/ruturajmaggirwar/bundle.min.js",
},
resolve: {
extensions: [".ts", ".tsx", ".js"],
},
module: {
rules: [
{
test: /\.ts(x?)$/,
exclude: /node_modules/,
use: "ts-loader",
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
};
- Use "npm run build" to build the gadget.
- Include the bundle.min.js file in static HTML.
- Open the static page in the browser and the React widget should display the random number passed from the static page.
in conclusion
Passing variables from static pages to widgets is crucial for building flexible, dynamic and modular components. By following the outlined steps, developers can ensure their widgets integrate seamlessly into any environment while remaining secure and efficient. Gadgets are the cornerstone of modern web development. With a little planning and care, they can dynamically and securely adapt to any environment.