The Assistant Landing Page provides an entry point for users when interacting with the assistant. It can be fully customized using HTML and CSS to create an engaging, branded experience. If no custom content is provided, a default placeholder is shown. When configured, users can interact with custom prompts or questions directly from the landing page.

Key Behaviors

Default (No HTML Configured)

If no HTML is configured, users will see a default message:
Prior to Chatting: “Hello user, ask a question to get started.”
As Assistant Asks User Questions: Placeholder that displays: “When a new analysis has been run, the results will show here.”

Custom (HTML Configured)

When HTML is provided, the assistant will display the custom content defined in the HTML. Users can include custom styling, questions, and interactive elements.
Custom elements can trigger actions within the assistant using the postMessage API to send questions to the assistant from clickable elements like buttons or list items.

How to Configure the Assistant Landing Page

Steps

Navigate to Co-pilot Settings: Open the co-pilot’s settings in Skill Studio.
Insert Custom HTML: Add the desired HTML into the settings area.
Submit and Test: After saving, navigate back to the assistant interface to test the custom layout and functionality.

Best Practices for HTML Intro Code

Design for Engagement: Include relevant information or questions to guide users in interacting with the assistant.
Responsiveness: Ensure that the HTML layout is responsive, adjusting well on both desktop and mobile devices.
Use Interactive Elements: Add buttons or lists that allow users to trigger predefined questions, improving the overall user experience.
Leverage the postMessage API: Use the postMessage function to send questions to the assistant directly from your HTML. This allows seamless interaction between the static HTML content and dynamic assistant responses.

Explanation of `postMessage` Code

The postMessage function allows your HTML interface to communicate directly with the assistant. This is crucial for enabling users to interact with the assistant by clicking on specific buttons or links that trigger predefined questions.

Structure:
- window.parent.postMessage({ askQuestion: 'Your question here' }, '*')
- This method sends a message to the parent window (i.e., the co-pilot environment) asking it to execute the question passed within the askQuestion property.

Example:

window.parent.postMessage({ askQuestion: 'What were volume sales by month in 2024?' }, '*');

This line of code triggers the assistant to fetch data for volume sales in 2024 when a user clicks the corresponding element.

Testing and Debugging Tips

HTML Validation: Ensure that all HTML tags are properly closed and structured to avoid rendering issues.
CSS Styling: Use inline CSS to keep styling simple and contained within the HTML.
Responsive Design: Test the layout on different screen sizes to ensure that it remains usable on all resolutions.
Troubleshooting postMessage: If interactions don’t work as expected, check the browser console for errors related to message passing or incorrect syntax.

Script Tags: Script tags must be within the Head tag.

<head>
<script>
  #your script code here
</script>
</head>

Example: Cereal Assistant HTML Code

Here is a detailed example of an Assistant Landing Page that users can interact with to trigger different predefined questions.

<head>
    <title>Cereal Assistant</title>
    <style>
        body, html { 
            font-family: 'Inter', Arial, sans-serif;
            margin: 0;
            padding: 0;
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            background-color: #fef5e6;
        }

        .dashboard-container {
            display: flex;
            flex-direction: column;
            height: 100vh;
            width: 100vw;
            padding: 5vh 2vw;
            box-sizing: border-box;
        }

        .header {
            text-align: center;
            padding: 2vh;
            background-color: #79962c;
            color: white;
            border-radius: 10px;
            margin-bottom: 3vh;
        }

        .header h1 {
            margin: 0;
            font-size: 3.5vh;
        }

        .card-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            gap: 2vh;
        }

        .card {
            flex: 1 1 calc(50% - 2vh);
            max-width: 400px;
            padding: 2vh;
            border-radius: 10px;
            background-color: white;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
        }

        .card h2 {
            color: #003c4e;
            margin-top: 0;
        }

        .card p {
            color: #555;
            margin-bottom: 2vh;
        }

        .question-list {
            list-style-type: none;
            padding: 0;
        }

        .question-item {
            background-color: #003c4e;
            color: white;
            margin-bottom: 1vh;
            padding: 1vh;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .question-item:hover {
            background-color: #00526b;
        }
    </style>
</head>
<body>
    <div class="dashboard-container">
        <div class="header">
            <h1>Welcome to your Cereal Assistant</h1>
        </div>
        <div class="card-container">
            <div class="card">
                <h2>Sales Analysis</h2>
                <p>Explore sales data for various cereal brands and manufacturers.</p>
                <ul class="question-list">
                    <li class="question-item" onclick="window.parent.postMessage({ askQuestion: 'What were volume sales by month in 2024?' }, '*')">What were volume sales by month in 2024?</li>
                    <li class="question-item" onclick="window.parent.postMessage({ askQuestion: 'What is driving Value sales in 2024?' }, '*')">What is driving Value sales in 2024?</li>
                </ul>
            </div>
            <div class="card">
                <h2>Brand Comparison</h2>
                <p>Compare performance metrics across different cereal brands.</p>
                <ul class="question-list">
                    <li class="question-item" onclick="window.parent.postMessage({ askQuestion: 'How did the volume prices and unit prices for each brand manufactured by Nestle compare in 2024?' }, '*')">How did the volume prices and unit prices for each brand manufactured by Nestle compare in 2024?</li>
                </ul>
            </div>
            <div class="card">
                <h2>Market Share Analysis</h2>
                <p>Analyze market share trends for cereal manufacturers.</p>
                <ul class="question-list">
                    <li class="question-item" onclick="window.parent.postMessage({ askQuestion: 'What is driving the share in 2024?' }, '*')">What is driving the share for in 2024?</li>
                    <li class="question-item" onclick="window.parent.postMessage({ askQuestion: 'Trend share for Kellogg\'s this year' }, '*')">Trend share for Kellogg's this year</li>
                </ul>
            </div>
            <div class="card">
                <h2>Performance Insights</h2>
                <p>Get detailed insights into manufacturer performance.</p>
                <ul class="question-list">
                    <li class="question-item" onclick="window.parent.postMessage({ askQuestion: 'Please explain Kellogg\'s performance in Q2 2024 AOA Discounters' }, '*')">Please explain Kellogg's performance in Q2 2024 AOA Discounters</li>
                </ul>
            </div>
        </div>
    </div>
</body>