CREATE WELCOME
MAT IN LWC
@TrailheadIQ
What is a Welcome Mat?
A Welcome Mat is a UI component designed to onboard
users and guide them through key actions. It often
includes:
Progress tracking
Interactive tiles
Visual indicators for completed tasks
A Welcome Mat provides a series of unordered items a
user can click to learn about a thematic topic.
@TrailheadIQ
Why Use a Welcome Mat in
Salesforce?
🎯 Key Benefits of a Welcome Mat:
Improved User Onboarding: Highlight key actions for
new users.
Visual Engagement: Use icons, progress bars, and
animations to capture attention.
Progress Tracking: Motivate users by showing their
progress visually.
Customization: Easily adapt the tiles to align with
your business needs.
@TrailheadIQ
Use Case for This Example
📌 What We’re Building:
A Welcome Mat for TrailheadIQ, showcasing key user
actions like liking posts, sharing content, and
commenting on ideas.
Includes a progress bar to track completion of
actions.
Features interactive tiles with clickable functionality
and completion indicators.
@TrailheadIQ
Code Breakdown – HTML Structure
@TrailheadIQ
Code Breakdown –
JavaScript Logic
@TrailheadIQ
Code Breakdown – CSS
@TrailheadIQ
HTML Code Overview
Welcome Mat Layout:
Divided into an information panel and a tiles
section.
Progress Bar:
A dynamic progress bar displays the percentage of
completed actions.
Interactive Tiles:
Each tile is clickable and toggles between
completed and not completed.
@TrailheadIQ
JavaScript Code Overview
Tracking Progress:
The completedCount and totalTiles properties
calculate and display progress dynamically.
Handling Tile Clicks:
The handleTileClick method toggles a tile’s completion
status.
Dynamic Updates:
Updating the completed state of tiles automatically
updates the progress bar.
@TrailheadIQ
Key Features of the Welcome Mat
✔️ Interactive Tiles: Users can toggle completion status
with a click.
✔️ Dynamic Progress Bar: Updates in real time based on
user actions.
✔️ Customizable Content: Easily replace icons, titles, and
descriptions.
✔️ Clean UI Design: Built with SLDS for a professional look.
✔️ Responsive: Works seamlessly across devices.
@TrailheadIQ
Practical Applications
📌 Where to Use a Welcome Mat:
Onboarding Dashboards: Guide new users through
setup tasks.
Training Modules: Track progress in training programs.
Gamification: Create engaging experiences with
progress tracking.
Salesforce Apps: Highlight features or tasks for users
to complete.
@TrailheadIQ
Best Practices for Welcome Mat
🎯 Development Tips:
Keep it Simple: Avoid cluttered layouts and
overwhelming tasks.
Progress Feedback: Use clear progress indicators to
motivate users.
Interactivity: Ensure tiles respond visually when
clicked.
Responsive Design: Test the component on different
devices.
Accessibility: Use ARIA roles and labels to support
screen readers.
@TrailheadIQ
Conclusion
Your Welcome Mat is now ready to guide users through
onboarding and tasks. With dynamic progress tracking and
interactive tiles, you can enhance user engagement and
create an impactful experience.
💬 Let’s Discuss: How would you use a Welcome Mat in
your Salesforce application? Share your ideas below!
@TrailheadIQ
THANK
YOU
Remember, every like, share, and comment
helps us reach more people and make a
bigger impact. Together, we can make the
Salesforce community stronger and more
informed.#TrailheadIQ#SalesforceCommunity
www.trailheadiq.com
