HTML Container

Introduction

Welcome to the HTML Container component documentation! As part of the page builder in App Platform, the HTML Container component allows you to embed custom HTML code directly into your web applications. This component is essential for incorporating bespoke elements, custom scripts, or third-party integrations that enhance the functionality and uniqueness of your applications.

Why we developed it

The HTML Container component provides flexibility and control over the content and functionality of web pages beyond the standard components available in the App Platform. It enables you to integrate specialized content, such as pre-built\available content, such as an external widgets, directly into their applications. This capability is crucial for creating highly tailored user experiences and extending the functionality of standard components.

What it could be used for

  • Embedding custom HTML or interactive elements that are not natively supported by the platform.

  • Integrating third-party widgets, such as live chat support, ticket information, or weather updates.

  • Inserting custom scripts for enhanced tracking, analytics, or dynamic content updates.

  • Enhancing pages with bespoke multimedia content, like videos or custom graphics.

Example \ Use Case

An MSP could use the HTML Container component to enhance the support section of their client portal by embedding a real-time support ticket status widget. This widget, crafted with custom HTML and JavaScript, could connect directly to your ticketing system to display the current status of a client's support tickets, including open issues, pending actions, and resolved cases.

Adding a HTML Container to a page

  1. Access the Canvas: Open the page you're working on in edit mode, in App Platform.

  2. Drag-and-Drop: Locate the 'HTML Container' component in the component library, then drag and drop it onto the canvas.

Configuring the HTML Container component

  1. Select the component: Click on the added 'HTML Container' component to select it.

  2. Properties Panel: On the properties panel, you'll find various configurable options:

    • In-line styles: Define custom CSS properties for the component.

    • In-line HTML: Define custom HTML code for the component.

  3. Live Preview: The canvas provides a live preview of your configured component(s) once you've made changes.

If you have any questions or need assistance, feel free to reach out to our support team. - Happy designing! πŸŽ¨πŸš€

Last updated