Hosted Pages

When you create a Hosted Page, you are generating a customised, branded interface that someone else, typically your client, partner, or company owner, can use to easily access and install your services without requiring direct development work on their side.

In other words, you are building a ready-made experience for them, tailored with your branding and pre-selected settings, so they can interact with your services (such as installing couriers, or integrations) quickly and seamlessly.

Key Points:

• You control the branding, options and configurations.

• They (your client or partner) simply click a link, follow the guided setup, and start using your services.

• This approach removes complexity for the end-user and ensures a consistent, professional onboarding experience.

Simple Version:

You are setting up a Hosted Page so others can easily customise and install your services through a clean, branded portal - without needing to build anything themselves.

Accessing Hosted Pages

To locate the Hosted Pages section:

1. Click My Account in the bottom-left corner of the interface.

2. In the bottom left you will see the section, called Hosted Pages.

3. Click, “Add Hosted Page”

Key Features of Hosted Pages

Hosted Pages empower you to generate a companies invitation links, tailor branding, and manage courier configurations efficiently. The main functionalities are outlined below:

1 – 4: Active Links

Manage invitation links for your Companies:

1. Select the desired Company (API Account) from the list provided.

2. Click "+ Generate" to create an invitation link for the selected Company.
   

   Note: Generated links are valid for one hour. After expiration, a new link must be generated.

   

3. Click the generated link to open a page showing installed couriers.

   • If no couriers are installed, a notification will appear.
     

   

4. To proceed:

   • Click "Install" at the bottom of the page.

   • Select the desired Couriers to install.

   • Click the "Install" button for each selected courier.

   • Enter the required data (company-specific).

   • Tick all appropriate checkboxes according to your needs.

   • Click "Save" to complete the installation.

5: Branding & Personalisation

Customise the appearance of your Hosted Pages to reflect your brand identity:

• Upload a custom logo via a URL.

• Toggle the visibility of the search bar.

• Adjust the colour scheme and font size.

• You can add a custom header and footer, as well as CSS styling for the both.

Recommended logo size:
230 pixels (width) × 40 pixels (height)

You can add more styles in your Custom Header

Example
HTML
Copy
<h1 style="text-align: center; padding: 20px;">My Centered Header</h1>

You can add more styles in your Custom Footer if you want it in the center and to add padding to the bottom.

Example
HTML
Copy
<p style="text-align: center; padding-bottom: 10px;">CopyRight Footer</p>

6: Custom Stylesheets

Apply advanced branding by incorporating your own CSS styles:

1. Edit the Background Color, Button Text Color, Card Background Color, Button Font Size, Custom Header, Custom Footer to match your brand’s aesthetic preferences.

2. Upload the updated stylesheet to a hosting service.

3. Provide the hosted URL within Voila to apply the custom stylesheet.

You may apply multiple stylesheets by adding several URLs in the desired order.

Example
URL
Copy
https://yourhost.com/styles/custom-style.css

7: Available Couriers

Manage which couriers are accessible via Hosted Pages:

• Enable or disable couriers by ticking the corresponding checkboxes or Select All, to enable them on the hosted page.

• Apply visual settings and filters to refine the couriers list to match your branding.

Creating Hosted Pages via API Call

For users who prefer programmatic control, Voila also supports generating Hosted Pages through direct API requests.

To create a Hosted Page invitation link using an API call:

Step-by-Step Instructions

1. Ensure you have the appropriate API credentials:

   • api-user

   • api-token

2. Send a POST request to the following endpoint:

   Example
   URL
   Copy
   https://app.heyvoila.io/api/hosted-pages/create/register-couriers

3. Include the necessary headers for authentication:

   • api-user: Your Voila API username.

   • api-token: Your Voila API token.

4. Set the request type to JSON.

Example
JavaScript
Copy
const response = await request.post({
            url: 'https://app.heyvoila.io/api/hosted-pages/create/register-couriers',
            headers: {'api-user':'user','api-token': 'token'},
            json: true
        });

Important Notes

• Replace baseUrls.dev with the appropriate environment URL (dev, staging, or production).

• API tokens should be stored securely and never exposed in client-side code.

• The returned response will include the generated Hosted Page link or an error message if the request fails.

Would you like to see a video walkthrough? No problem - go to our video walkthrough section instead, hosted pages in Voila.

Additional Support

Please contact our Support if you have any additional enquiries.