React Web Components - DO NOT DELETE

What is a Web Component?

A web component is a reusable, encapsulated piece of functionality or UI that can be rendered inside a web page. In our context, web components allow React components to be embedded in areas of a website that normally accept static HTML content, such as custom HTML containers or static pages.

Instead of manually coding interactive elements every time, web components provide a modular approach: developers create the component once, and content editors or the support team can use it anywhere on the site simply by inserting its HTML tag with configuration.

Purpose / Use Cases

• Enable interactive pages without touching backend code.
• Allow content editors or support teams to add sliders, galleries, modals, video popups, or forms directly into static pages.
• Reusable across multiple pages for consistency and efficiency.
• Supports nested HTML and JSON safely using encodings like &rq; and &rqs;.

Who Uses Web Components?

• Customer Support / Content Team: Can add or modify interactive elements without programming knowledge.
• Developers / Dev Team: Build and maintain components, ensuring proper integration, parsing, validation, and advanced configuration options.

Benefits

• Efficiency: Quick content updates without redeploying code.
• Consistency: Single component can be reused across multiple pages.
• Flexibility: Supports nested HTML, JSON configurations, and custom styling.
• Safety: Encapsulated behavior reduces the risk of conflicts with page content.

Examples