Landing Page

The Webfuse Landing Page serves as a customizable entry point to a Space’s Sessions, designed to provide essential pre-session information, gather user consent, or enforce authentication and compliance requirements. You can leverage Webfuse Studio’s Landing Page editor to design a landing experience, or upload fully custom HTML, CSS, and JavaScript to ensure a seamless transition into the session.

⚙️Space Configuration

In Studio, navigate to the Share tab of the respective space.

Types

The platform offers two types of Landing Pages:

1. Default Page – A simple, configurable page with customizable text, colors, and images.
2. Custom Page – A fully customizable page where you can upload your own HTML and assets.

Default Landing Page

The default Landing Page provides an easy way to create a a Landing Page with the Landing Page editor

Customize Default Landing Page

1. Navigate to your Space and click Share in top bar.
2. Click on Customize button.
3. Ensure Default is selected in the sidebar.
4. Modify the Landing Page settings as needed.
5. Click on Save button.
6. Make sure to toggle Enable Landing Page to On.

You can customize:

• Title - The main heading of your Landing Page.
• Description - A longer text explaining your application.
• Button Text - Custom text for the action button.
• Colors - Background color, text color, button color, and button text color.
• Logo - Upload your company or application logo.
• Background Image - Add a custom background image.

All changes are previewed in real-time on the right side of the editor.

Save and Publish

Once you’re satisfied with your changes, click Save to store your configuration. Once you navigate to the space, The Landing Page will be available.

Custom Landing Page

For more advanced customization, you can create a fully custom Landing Page using your own HTML, CSS, and JavaScript.

Create Custom Landing Page

1. Navigate to your space and click on Share in the left sidebar.
2. Click on Customize button.
3. Ensure Custom is selected in the sidebar.

You have an option to select the Webfuse storage app or install your own storage app. Currently only s3-compatible storage is supported.

Custom Landing Page Requirements

• Your directory must include an index.html file as the entry point.
• Keep file paths relative within your HTML and CSS files.
• For optimal performance, minimize file sizes and optimize images.
• Ensure your design is responsive for different screen sizes.

Upload Custom Landing Page

1. Prepare your Landing Page files locally, ensuring you have an index.html file as the entry point.
2. In the Custom Landing Page editor, select a storage option from the dropdown.
3. Enter a directory name for your Landing Page files.
4. Click Upload Directory and select the folder containing your Landing Page files.
5. Once uploaded, your custom Landing Page will be previewed in the editor.

Use Your Own S3 Storage App

1. Upload your Landing Page files directly to your S3 bucket
2. In the Custom Landing Page editor, select your S3 storage app
3. Enter the directory name where you uploaded your files
4. Click Save to reference your uploaded files
5. Your custom Landing Page will be previewed in the editor

For best practices, we recommend building your project locally first and then uploading the built files. This ensures optimal performance and allows you to test your Landing Page thoroughly before deploying it.

Use Environment Variables

You can use environment variables in your custom Landing Page to make it dynamic and customizable. Environment variables are replaced with their actual values when your Landing Page is served.

Basic Usage

Use the {{.VARIABLE_NAME}} syntax to insert environment variables in your HTML, CSS, or JavaScript files:

<h1>Welcome to {{.COMPANY_NAME}}</h1>
<p>Contact us at {{.CONTACT_EMAIL}}</p>
<div>Current version: {{.App_VERSION}}</div>

Environment Variable Storage

Environment variables are stored and returned as strings and can be used in different ways:

HTML Context

Text/Strings :

<p>{{.GREETING}}</p>
<!-- If GREETING = "Hello World", renders as: -->
<p>Hello World</p>

Numbers (stored as strings):

<p>Timeout: {{.TIMEOUT_MS}}ms</p>
<!-- If TIMEOUT_MS = "5000", renders as: -->
<p>Timeout: 5000ms</p>

Boolean values (stored as strings):

<p>Debug mode: {{.DEBUG_MODE}}</p>
<!-- If DEBUG_MODE = "true", renders as: -->
<p>Debug mode: true</p>

JSON Objects and Arrays (stored as strings):

<p>Config: {{.CONFIG}}</p>
<!-- If CONFIG = {"theme": "dark", "lang": "en"}, renders as: -->
<p>Config: {"theme": "dark", "lang": "en"}</p>

JavaScript Context

JSON Objects and Arrays (stored as strings):

const config = JSON.parse('{{.CONFIG}}');
const features = JSON.parse('{{.FEATURES}}');
// If CONFIG = {"theme": "dark", "lang": "en"}, FEATURES = ["chat", "video", "screen-share"], renders as:
const config = {"theme": "dark", "lang": "en"};
const features = ["chat", "video", "screen-share"];

Caution

When using objects or arrays as environment variables, they must be valid JSON format strings. This means:

• Use quotes for strings: "value" (not 'value')
• Use double quotes for property names: {"key": "value"} (not {key: "value"})
• No trailing commas
• No comments
• In JavaScript context, you need to use JSON.parse to parse the string a correct type

Nested Object Access

In JavaScript context, you can access properties within objects using JSON.parse native function:

const config = JSON.parse('{{.CONFIG}}');
const features = JSON.parse('{{.FEATURES}}');
const title = config.title;
const theme = config.theme;
const language = config.language;
const primaryFeature = features[0];

Example

PAGE_TITLE=My Page
HEADING=Welcome to My Page
API_URL=https://api.example.com
CONFIG={"theme": "dark", "features": ["chat", "video"]}
DEBUG=true

<!DOCTYPE html>
<html>
<head>
    <title>{{.PAGE_TITLE}}</title>
</head>
<body>
    <h1>{{.HEADING}}</h1>
    <script>
        const apiUrl = "{{.API_URL}}";             // String value, quoted in JavaScript context
        const config = JSON.parse('{{.CONFIG}}');  // JSON string converted to object, quoted in JavaScript context
        const isDebug = JSON.parse('{{.DEBUG}}');  // String value converted to boolean, quoted in JavaScript context
    </script>
</body>
</html>

Environment Variables

To set environment variables for your Landing Page:

1. In the Custom Landing Page editor, scroll to the Environment Variables section

2. Click Add Variable to add a new environment variable
3. Enter the variable name (e.g., COMPANY_CONFIG)
4. Enter the value
5. Click Save to apply the changes

After saving the environment variables, the new values will be automatically applied.

Note

To allow users to join your space from your custom Landing Page, you need to implement a way to start a session. The Webfuse Widget provides an easy way to programmatically start sessions from your custom HTML.

// Initialize Webfuse space and create a session
webfuse.initSpace(
    'your_widget_key',
    'your_space_id',
    {}, // Optional integration settings
)
    .then(async space => {
        // Create a new session
        const session = space.session();

        // Start the session
        const response = await session.start();
    })
    .catch(error => {
        console.error('Failed:', error);
    });

Tip

You can preview how your Landing Page appears on different devices using the editor’s preview options. Toggle between desktop and mobile views to ensure your page looks good on all devices.

Meeting Space Landing Pages

If you are using a Landing Page for a meeting space, you may want to ensure users don’t see the Landing Page again after they’ve already entered the meeting. The platform handles this automatically by setting a cookie when a user first accesses the Landing Page.

If you want to control this behavior for a meeting space:

1. The Landing Page is shown only on the first visit to the space.
2. After the user enters the meeting, a cookie is set to remember this choice.
3. If the user refreshes the page, the Landing Page will be skipped, and they’ll go directly to the meeting.
4. If a new meeting session has started, It will show the Landing Page again.

The cookie used for this functionality is named landing_page_viewed_<space_slug>_<session_id>, where <space_slug> is the slug of your space and <session_id> is the unique identifier of the current session. This cookie is checked on subsequent visits to determine whether to display the Landing Page again.

const expires_in_an_hour = new Date(Date.now() + 60 * 60 * 1000);
document.cookie = "landing_page_viewed_<space_slug>_<session_id>=true; path=/; expires=" + expires_in_an_hour.toUTCString();

Since the session_id is unique, Starting a new meeting session will show the Landing Page again.

If you need to customize this behavior or implement your own Landing Page persistence logic, you can work with this cookie directly in your custom Landing Page code.

You can customize this behavior for your meeting spaces to provide the optimal user experience.

Publish Landing Page

1. Navigate to your space’s Share page.
2. Enable the Publish Landing Page toggle.
3. Your Landing Page will now be accessible at your space’s public URL.

Caching Considerations

The platform implements caching to improve performance for your custom Landing Pages:

• All files except index.html are cached for 7 days.
• When uploading newer versions of your Landing Page, make sure to version your built files (e.g., by adding a query parameter like style.css?v=2 or using a hash in filenames like style.123abc.css).
• This versioning approach ensures users get the latest version of your assets without waiting for the cache to expire.