preference-center
Advanced tools
The **Preferences Widget** allows users to select and manage their product preferences, such as categories, sizes, colors, and brands. This widget can be easily embedded into any HTML page and is customizable via JavaScript. The widget fetches data from a
The Preferences Widget allows users to select and manage their product preferences, such as categories, sizes, colors, and brands. This widget can be easily embedded into any HTML page and is customizable via JavaScript. The widget fetches data from a backend API, displays user preferences, and allows modifications to be saved back to the server.
To use the Preferences Widget, include the JavaScript file in your project.
<script src="https://cdn.jsdelivr.net/npm/preference-center/script.js"></script>
To render the widget, simply call the PreferencesWidget.init() method after the DOM is ready. You will need to provide the following parameters:
containerId: The ID of the HTML element where the widget will be rendered.tenantId: Your tenant ID from the backend system.accessToken: The access token for API authentication.customerId: The customer ID for whom preferences are being managed.Make sure to have a container element where the widget will be rendered.
<div id="preferences-widget-container"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preferences Widget</title>
<script src="https://cdn.jsdelivr.net/npm/preference-center/script.js"></script>
</head>
<body>
<div id="preferences-widget-container"></div>
<script>
const tenantId = "your-tenant-id";
const accessToken = "your-access-token";
const customerId = "your-customer-id";
PreferencesWidget.init("preferences-widget-container", tenantId, accessToken, customerId);
</script>
</body>
</html>
import PreferencesWidget from 'preferences-widget';
document.addEventListener('DOMContentLoaded', () => {
const tenantId = "your-tenant-id";
const accessToken = "your-access-token";
const customerId = "your-customer-id";
PreferencesWidget.init("preferences-widget-container", tenantId, accessToken, customerId);
});
The widget requires the following parameters for initialization:
Make sure the API endpoints and authentication tokens are properly configured. The widget interacts with the following APIs:
init(containerId, tenantId, accessToken, customerId)This method initializes the widget and renders it inside the specified container. It also handles API calls to fetch and update user preferences.
containerId (string): The ID of the container element in the DOM where the widget will be inserted.tenantId (string): The unique tenant ID for backend interaction.accessToken (string): A valid access token for API authentication.customerId (string): The ID of the customer whose preferences will be managed.PreferencesWidget.init("preferences-widget-container", "tenantId123", "accessTokenABC", "customerIdXYZ");
The widget consists of the following components:
Here is a basic example to demonstrate how to initialize and use the Preferences Widget on a webpage:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preferences Widget</title>
<script src="preferences-widget.js"></script>
</head>
<body>
<div id="preferences-widget-container"></div>
<script>
const tenantId = "your-tenant-id";
const accessToken = "your-access-token";
const customerId = "your-customer-id";
PreferencesWidget.init("preferences-widget-container", tenantId, accessToken, customerId);
</script>
</body>
</html>
In this example, the widget is rendered in the #preferences-widget-container div, and the necessary data is fetched and managed via the backend API.
FAQs
The **Preferences Widget** allows users to select and manage their product preferences, such as categories, sizes, colors, and brands. This widget can be easily embedded into any HTML page and is customizable via JavaScript. The widget fetches data from a
We found that preference-center demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.