HomeGuidesSDK ExamplesAnnouncementsCommunity
Guides
Start typing to search…

Landing Page

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

  1. Navigate to Co-pilot Settings: Open the co-pilot’s settings in Skill Studio.
  2. Insert Custom HTML: Add the desired HTML into the settings area.
  3. 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

  1. HTML Validation: Ensure that all HTML tags are properly closed and structured to avoid rendering issues.
  2. No "Head" sections: Double check that no generated or written code includes a head section or your landing page may not render well.
  3. CSS Styling: Use inline CSS to keep styling simple and contained within the HTML.
  4. Responsive Design: Test the layout on different screen sizes to ensure that it remains usable on all resolutions.
  5. Troubleshooting postMessage: If interactions don’t work as expected, check the browser console for errors related to message passing or incorrect syntax.
  6. 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>


Prompt Instructions for using LLM to write code

Primary prompt for guiding LLMs in creating landing page code

# HTML Artifact Reliability Guidelines

## Core Structure Requirements

### 1. HTML Structure
```html
<head>
    <title>Page Title</title>
    <style>
        /* All CSS here */
    </style>
</head>
<body>
    <!-- Content here -->
    <script>
        // JavaScript here
    </script>
</body>
```
**Critical Rules:**
- Always start with `<head>` tag (no DOCTYPE or html wrapper)
- All styles MUST be in `<style>` tags within `<head>`
- All JavaScript MUST be in `<script>` tags at end of `<body>`
- Never use external stylesheets or scripts (except from cdnjs.cloudflare.com)

### 2. CSS Reliability Principles

#### Use Standard, Well-Supported Properties
```css
/* ✅ GOOD - Standard properties */
.element {
    display: flex;
    background: linear-gradient(45deg, #color1, #color2);
    transform: translateY(-5px);
    transition: all 0.3s ease;
}

/* ❌ AVOID - Complex or experimental properties */
.element {
    backdrop-filter: blur(10px); /* Limited support */
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* Can be unreliable */
}
```
#### Avoid Problematic Background Techniques
```css
/* ❌ AVOID - Data URI SVGs in backgrounds */
background: url('data:image/svg+xml,<svg>...</svg>');

/* ✅ GOOD - CSS patterns and gradients */
background: linear-gradient(135deg, #color1, #color2);
background: repeating-linear-gradient(45deg, transparent 0px, transparent 10px, rgba(0,0,0,0.1) 10px, rgba(0,0,0,0.1) 20px);
```
#### Grid and Flexbox Best Practices
```css
/* ✅ GOOD - Simple, reliable layouts */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.flex {
    display: flex;
    align-items: center;
    justify-content: center;
}
```
### 3. Animation Guidelines

#### Use Simple, Performance-Friendly Animations
```css
/* ✅ GOOD - Transform and opacity animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

/* ❌ AVOID - Complex or resource-intensive animations */
@keyframes complexMove {
    0% { transform: rotate(0deg) scale(1) skew(0deg); filter: hue-rotate(0deg); }
    100% { transform: rotate(360deg) scale(1.5) skew(15deg); filter: hue-rotate(360deg); }
}
```
### 4. JavaScript Reliability Rules

#### Event Handling
```javascript
// ✅ GOOD - Simple, defensive event handling
document.addEventListener('DOMContentLoaded', function() {
    const element = document.querySelector('.target');
    if (element) {
        element.addEventListener('click', function() {
            // Safe operations
        });
    }
});

// ✅ GOOD - Throttled scroll events
let ticking = false;
window.addEventListener('scroll', function() {
    if (!ticking) {
        requestAnimationFrame(function() {
            // Scroll handling
            ticking = false;
        });
        ticking = true;
    }
});
```
#### Avoid Complex Operations
```javascript
// ❌ AVOID - Complex DOM manipulations
function complexAnimation() {
    // Multiple DOM queries, complex timing, nested animations
}

// ✅ GOOD - Simple, predictable interactions
function simpleInteraction() {
    element.style.transform = 'scale(1.1)';
    setTimeout(() => {
        element.style.transform = 'scale(1)';
    }, 200);
}
```
### 5. Cross-Browser Compatibility

#### CSS Prefixes and Fallbacks
```css
.element {
    /* Fallback first */
    background: #333;
    background: linear-gradient(45deg, #333, #666);
    
    /* Standard property last */
    transition: all 0.3s ease;
}
```
#### Feature Detection in JavaScript
```javascript
// ✅ GOOD - Check for feature support
if ('IntersectionObserver' in window) {
    // Use Intersection Observer
} else {
    // Fallback approach
}
```
### 6. Content Structure Best Practices

#### Semantic HTML
```html
<!-- ✅ GOOD - Semantic structure -->
<section class="hero">
    <div class="container">
        <h1>Main Title</h1>
        <p>Description</p>
        <a href="#section" class="cta-button">Call to Action</a>
    </div>
</section>

<section class="features" id="section">
    <div class="container">
        <h2>Section Title</h2>
        <div class="grid">
            <div class="card">
                <h3>Card Title</h3>
                <p>Card content</p>
            </div>
        </div>
    </div>
</section>
```
#### Container Patterns
```css
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 80px 0;
}
```
### 7. Responsive Design Guidelines

#### Mobile-First Approach
```css
/* Base styles for mobile */
.grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

/* Tablet and up */
@media (min-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktop and up */
@media (min-width: 1024px) {
    .grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
```
### 8. Performance Optimization

#### Efficient Selectors
```css
/* ✅ GOOD - Simple, specific selectors */
.card { }
.card-title { }
.card:hover { }

/* ❌ AVOID - Complex, nested selectors */
.section .container .grid .card .content .title { }
```
#### Minimize Reflows and Repaints
```css
/* ✅ GOOD - Use transform and opacity for animations */
.element:hover {
    transform: translateY(-5px);
    opacity: 0.8;
}

/* ❌ AVOID - Properties that trigger layout */
.element:hover {
    width: 110%;
    height: 110%;
    top: -5px;
}
```
### 9. Common Pitfalls to Avoid

#### 1. Data URI Complexity
- Avoid complex SVG data URIs in CSS
- Use CSS patterns, gradients, or simple shapes instead

#### 2. Over-Animation
- Limit simultaneous animations
- Use `transform` and `opacity` for smooth performance
- Avoid animating layout properties

#### 3. Complex Selectors
- Keep CSS selectors simple and flat
- Avoid deep nesting in CSS

#### 4. Browser Storage APIs
- **NEVER** use localStorage or sessionStorage in Claude artifacts
- Use JavaScript variables or React state instead

#### 5. External Dependencies
- Only use libraries from cdnjs.cloudflare.com
- Minimize external dependencies
- Prefer vanilla CSS and JavaScript when possible

### 10. Testing Checklist

Before finalizing any HTML artifact:

- [ ] All content renders on first load
- [ ] No console errors in developer tools
- [ ] Responsive design works on mobile
- [ ] Animations are smooth and don't cause layout thrashing
- [ ] Interactive elements respond correctly
- [ ] No external dependencies except from approved CDNs
- [ ] CSS uses standard, well-supported properties
- [ ] JavaScript is defensive and handles edge cases

### 11. Emergency Fixes

If content doesn't render:
1. Remove complex background images/SVGs
2. Simplify CSS animations
3. Check for typos in CSS property names
4. Ensure proper HTML structure
5. Test with minimal CSS first, then add complexity

### 12. Code Organization Template

```html
<head>
    <title>Page Title</title>
    <style>
        /* 1. Reset and base styles */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: system-ui, sans-serif; }
        
        /* 2. Layout utilities */
        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        
        /* 3. Component styles */
        .hero { /* styles */ }
        .card { /* styles */ }
        
        /* 4. Animations */
        @keyframes fadeIn { /* keyframes */ }
        
        /* 5. Responsive */
        @media (max-width: 768px) { /* mobile styles */ }
    </style>
</head>
<body>
    <!-- Clean, semantic HTML structure -->
    
    <script>
        // 1. Wait for DOM
        document.addEventListener('DOMContentLoaded', function() {
            // 2. Simple interactions
            // 3. Event listeners with null checks
        });
    </script>
</body>
```
## Summary

The key to reliable HTML artifacts is **simplicity and standards compliance**. Always choose the most straightforward approach that achieves the desired visual effect. When in doubt, start with basic CSS and gradually add complexity while testing at each step.

Guidance on Adding "Ask Question" functions

## Ask Question Pattern - Essential Implementation

### Basic JavaScript Function
```javascript
function handleCardClick(cardType) {
    let question = '';
    switch(cardType) {
        case 'your_analysis_type':
            question = 'Your specific analytics question here';
            break;
        // Add more cases as needed
    }

    if (question) {
        window.parent.postMessage({ askQuestion: question }, '*');
    }
}
```
### HTML Structure
```html
<div onclick="handleCardClick('your_analysis_type')">
    <h2>Analysis Title</h2>
    <p>Description of what this analysis does</p>
</div>
```
### Critical Rules
1. **No alerts or popups** - communication should be silent
2. **Use specific, actionable questions** aligned with your data
3. **Each clickable element needs a unique card type** in the switch statement
4. **Always include the postMessage line** exactly as shown

That's it. Click → Question → Silent communication to parent platform.

Alternate

When writing HTML content for this environment:

  1. Use only inline CSS styles, no external stylesheets or style tags
  2. Root element must use: display: flex; flex-direction: column; flex-grow: 1;
  3. Always provide complete, working code that can run standalone
  4. For images use: <img src="/api/placeholder/[width]/[height]" alt="description" />
  5. For interactive buttons use:
<script>
    function handleQuestionClick(question) {
        window.parent.postMessage({ askQuestion: question }, '*');
    }
</script>

And buttons like:

<button onclick="handleQuestionClick('Your question here')">Click</button>

That's all you need to get started! Each piece of code should be complete and ready to run.

Updated about 2 months ago