Image component

As part of the page builder in App Builder, the Image component allows you to integrate visual content into your web applications. This component is essential for enhancing the visual appeal, conveying information visually, and supporting the textual content within your applications.

Why we developed the image component

The Image component provides a straightforward and effective way to include images in your applications, which can be crucial for branding, user engagement, and instructional purposes. Images help to break up text, make pages more engaging, and can be used to illustrate concepts or guide users more intuitively than text alone.

What the image component could be used for

• Showcasing product features or service details.

• Enhancing blog posts or articles with relevant visuals.

• Creating a more engaging user interface with graphical elements.

• Displaying logos or other branding materials to strengthen identity.

Example \ use case for the image component

An MSP might use the Image component to enhance a tutorial page on their client portal. By incorporating screenshots and diagrams, they can visually guide clients through the steps to set up a VPN or configure email settings on various devices. This not only makes the instructions clearer and more accessible but also reduces the cognitive load on users, potentially decreasing the number of support calls and increasing client satisfaction with the self-service options provided.

Add an image to your page

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

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

Configure the image component

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

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

   • Source URL: Specify the URL of the image.

   • Link: Specify the URL to which the image redirects when clicked.

   • Open link as new tab: Toggle to open the Link URL in a new tab.

   • In-line styles: Define custom CSS properties 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! 🎨🚀