Content (Component) Blocks

Templates allow you to build your layout using empty content blocks. These blocks act as visual placeholders and can be configured later. This is useful when you want to design the layout first and fill in the details afterwards.

Unlike the Library panel, where you use prefilled components, the Templates panel provides a blank version of each block.

💡What This Means
While the Library panel is for reusing preconfigured components, the Templates panel provides empty content blocks. These blocks act as visual placeholders and are ideal when you want to start from scratch.

Banner

You can easily set up a Banner component using the Templates panel on the left side of the screen.

Step 1 – Open the Templates Panel

• From the left-hand toolbar, select Templates to open the panel.
• Drag the Banner component into the desired section on your screen.

Step 2 – Configure the Banner

• In the Details panel on the right:
• Enter a name for your component in the Component Name field.
• Set the Aspect Ratio – Choose from 16:9, 1:1, 4:3, 2:1, or Custom depending on your visual layout needs.
• Select Service Details Option – Choose how (or if) you want to show service info:
  • No Service Details
  • Display Service Details Inside
  • Display Service Details Outside

Step 3 – Add a Banner

• Click Add Banner to open the configuration dialog.
• Choose Service or URL as your banner type.
  • Select a service from the dropdown or insert an external link.
• Upload a JPG or PNG (max 1 MB) in the selected aspect ratio.
• Enable the Searchable checkbox if you’d like the banner to appear in search results.

Step 4 – Finalize

• Click the Add Banner button to confirm and close the modal.
• The banner will now appear in your preview and in the component details.

📌Each Banner component supports up to 8 banners. If you reach the limit, a message will let you know.

Aspect Ratio Change Warning

When changing the aspect ratio of a Banner after an image has already been uploaded, a confirmation modal appears with two options:

• Resize Media
  The uploaded image will be resized automatically to match the new aspect ratio you’ve selected.
• Keep Original
  The aspect ratio will not be changed. The image will be kept exactly as it is, preserving its original dimensions and proportions. This option simply cancels the aspect ratio change for that banner.

Grid Pack

A Grid Pack displays multiple services or folders in a compact, tile-based layout. It’s ideal for visually showcasing 4–8 services in a clean and balanced grid structure.

Step 1 – Open the Templates Panel

• From the left-hand toolbar, select Templates to open the panel.
• Drag the Grid Pack into the desired section on your screen.

Step 2 – Configure the Grid Pack

• In the Details panel on the right:
• Enter a name for your component in the Component Name field.
• In the Pack Type dropdown, make sure Grid Pack is selected.

Step 3 – Add Services

• Click Add Service(s) to open the service selection modal.
• Use the checkboxes to select one or more services you’d like to display in the grid.
  • You can use the search bar or scroll to locate services.
  • Services will appear live in the preview as you select them.
• To improve layout and experience, it’s recommended to add at least 4 services.

Step 4 – Finalize

• Review your selected services in the list.
• Click the Add Service(s) button at the bottom right.

Step 5 – Save to Library (Optional)

• If you'd like to reuse this configuration later, hit Save to Library.

List Pack

The steps to set up a List Pack are the same as for Grid Packs:

Step 1 – Open the Templates Panel

• From the left-hand toolbar, select Templates to open the panel.
• Drag the List Pack into the desired section on your screen.

Step 2 – Configure the List Pack

• In the Details panel on the right:
  • Enter a name for your component in the Component Name field.
  • In the Pack Type dropdown, make sure List Pack is selected.

Step 3 – Add Services

• Click Add Service(s) to open the service selection modal.
• Use the checkboxes to select one or more services you'd like to display in the grid.
  • You can use the search bar or scroll to locate services.
  • Services will appear live in the preview as you select them.

Step 4 – Finalize

• Review your selected services in the list.
• Click the Add Service(s) button at the bottom right.

Slider Pack

The steps to set up a Slider Pack are the same as for Grid and List Packs:

Step 1 – Open the Templates Panel

• From the left-hand toolbar, select Templates to open the panel.
• Drag the List Pack onto a section in the screen preview.

Step 2 – Configure the Slider Pack

• In the Details panel on the right:
  • Enter a name for your component in the Component Name field.
  • In the Pack Type dropdown, make sure Slider Pack is selected.

Step 3 – Add Services

• Click Add Service(s) to open the service selection modal.
• Use the checkboxes to select one or more services you'd like to display in the grid.
  • You can use the search bar or scroll to locate services.
  • Services will appear live in the preview as you select them.

Step 4 – Finalize

• Review your selected services in the list.
• Click the Add Service(s) button at the bottom right.

AI Pack

An AI Pack is a dynamic component that displays services based on user behavior. Instead of manually selecting services, you define the layout and let an algorithm decide which services to show — such as trending ones or those a user frequently uses. This helps personalize the app experience automatically.

Step 1 – Open the Templates Panel

• From the left-hand toolbar, select Templates to open the panel.
• Drag the AI Pack onto a section in the screen preview.

Step 2 – Configure the AI Pack

• In the Details panel on the right:
  • Enter a Component Name
    In the Details panel, provide a name for your component.
  • Pack Type is Preselected
    The Pack Type is automatically set to Grid Pack and can be changed to List Pack, or Slider Pack.
  • Set the Number of Services
    Use the Number of Services dropdown to choose how many services should be shown. Options include: 4, 8, 16, 24.
  • Select an AI Algorithm
    Open the AI Algorithm dropdown and choose from:
    • Trending – Shows the most popular services among users.
    • Frequently Used – Prioritizes the services users access most often.
    • Maybe Interested – Suggests services based on similar user behavior and preferences.

Step 3 – Save to Library (Optional)

• If you'd like to reuse this configuration later, hit Save to Library.

📌Note: The icons shown are placeholders. The actual services will be populated dynamically per user at runtime.