Demo Gallery
Experience the power of real-time engagement
Quick Navigation
Event Ticketing
Transform your Concert Ticket Sales Platform with real-time social proof
Website Interaction
- Ticket purchase confirmations
- Real-time seat availability
- VIP package bookings
- Pre-sale access notifications
Smart Data Integration
- Event name and venue
- Ticket type and section
- Purchase timestamp
- Seat location
- Color-coded venues (Red for Madison Square Garden, Blue for The Forum, Green for Wembley Stadium, etc.)
Drive Business Results
Drive urgency and showcase live ticket sales activity to encourage faster purchasing decisions.
- Boost customer confidence with social proof
- Create urgency with real-time activity
- Increase conversion rates
- Enhance user engagement
Wall Configuration
Here are the exact settings used to create this demo wall in the VitalWall dashboard
Basic Settings
Layout Settings
Configure Your Own Wall
You can customize these same settings in your VitalWall dashboard when creating or editing your own walls. Each setting affects how your wall displays and behaves on your website.
Easy Implementation
Add this simple code snippet to your website and watch the magic happen
VitalWall offers two implementation approaches:
**Option 1: Simple Attribute-Based (No Coding Required)**
Perfect for non-developers and quick setup. Uses HTML attributes to automatically track events.
**Option 2: NPM Package (Developer-Friendly)**
Full programmatic control with TypeScript support, ideal for JavaScript applications and developers.
---
## Option 1: Simple Attribute-Based Implementation
<!-- STEP 1: Add VitalWall script to your ticket purchase page -->
<script type="module">
const { default: VitalWall } = await import('https://unpkg.com/@vitalwall/client@latest/dist/index.esm.js');
const vitalWall = new VitalWall();
await vitalWall.init({
wallId: "your-wall-id",
apiKey: "your-api-key"
});
</script>
<!-- STEP 2: Add wall display container -->
<div data-vital-wall="your-wall-id"></div>
<!-- STEP 3: Track ticket purchases with data attributes -->
<button id="purchase-btn"
data-vital-item="ticket-purchase-content"
data-vital-html="true">
Complete Purchase
</button>
<!-- Hidden element containing the ticket HTML to send -->
<div id="ticket-purchase-content" style="display: none;">
<div class="ticket" style="--venue-color: #ff4b4b;">
<div class="ticket-stub">
<div class="stub-content">
<div class="event-code">EVENT CODE<br>A115</div>
<div class="stub-details">
<div class="stub-item">SECTION/AISLE<br>A1</div>
<div class="stub-item">ROW<br>15</div>
<div class="stub-item">SEAT<br>12</div>
</div>
</div>
</div>
<div class="ticket-main">
<div class="main-header">
<div class="header-labels">
<span>SECTION/AISLE</span>
<span>ROW</span>
<span>SEAT</span>
</div>
<div class="header-values">
<span>A1</span>
<span>15</span>
<span>12</span>
</div>
</div>
<div class="main-content">
<div class="event-name">Journey</div>
<div class="venue-info">at Madison Square Garden</div>
<div class="show-info">SAT MAR 15 2025 8:00PM</div>
</div>
<div class="ticket-footer">
<div class="section-indicators">
<div class="indicator">
<span>SEC</span>
<strong>A1</strong>
</div>
<div class="indicator">
<span>ROW</span>
<strong>15</strong>
</div>
<div class="indicator">
<span>SEAT</span>
<strong>12</strong>
</div>
</div>
<div class="barcode"></div>
</div>
</div>
</div>
</div>
<!-- STEP 4: Note about styling -->
<!--
This demo wall uses embedded CSS configured in the wall settings.
See the CSS example at the bottom of this documentation.
-->
---
## Option 2: NPM Package Implementation
<!-- STEP 1: Install the NPM package -->
npm install @vitalwall/client
<!-- STEP 2: Import and initialize VitalWall -->
<script type="module"></script>
<!-- STEP 3: Add wall display container -->
<div data-vital-wall="your-wall-id"></div>
<!-- STEP 4: HTML structure -->
<button id="purchase-btn">Complete Purchase</button>
<!-- STEP 5: Note about styling -->
<!--
This demo wall uses embedded CSS configured in the wall settings.
See the CSS example below.
-->
---
## Example CSS Used in This Demo Wall
This demo wall uses embedded CSS configured in the wall settings to create the ticket design.
Here's an example of the CSS applied (note: no <style> tags needed in the wall editor):
.ticket {
display: flex;
background: white;
margin: 12px;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
width: 600px;
}
.ticket-stub {
background: #f8f8f8;
padding: 20px;
border-right: 2px dashed #ddd;
width: 140px;
}
.stub-content {
display: flex;
flex-direction: column;
gap: 20px;
}
.event-code {
font-size: 14px;
font-weight: 700;
color: #333;
}
.stub-details {
display: flex;
flex-direction: column;
gap: 12px;
}
.stub-item {
font-size: 12px;
color: #666;
line-height: 1.4;
}
.ticket-main {
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
gap: 24px;
}
.main-header {
display: flex;
flex-direction: column;
gap: 4px;
}
.header-labels {
display: flex;
gap: 32px;
color: var(--venue-color);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
}
.header-values {
display: flex;
gap: 32px;
font-size: 15px;
font-weight: 600;
color: #333;
}
.main-content {
text-align: center;
}
.event-name {
font-size: 24px;
font-weight: 700;
margin-bottom: 8px;
color: #333;
}
.venue-info {
font-size: 16px;
color: #666;
margin-bottom: 8px;
}
.show-info {
font-size: 18px;
color: #444;
}
.ticket-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
}
.section-indicators {
display: flex;
gap: 16px;
}
.indicator {
display: flex;
flex-direction: column;
align-items: center;
background: #f4f4f4;
padding: 6px 16px;
border-radius: 3px;
}
.indicator span {
font-size: 11px;
color: #666;
margin-bottom: 4px;
text-transform: uppercase;
font-weight: 500;
}
.indicator strong {
font-size: 16px;
color: #333;
font-weight: 600;
}
.barcode {
width: 100px;
height: 40px;
background: repeating-linear-gradient(90deg, #000, #000 2px, #fff 2px, #fff 4px);
}
See It In Action

Developer Community Platform
Transform your GitHub, Stack Overflow, Dev.to, Hashnode, or your developer blog with real-time social proof
Website Interaction
- New blog posts published
- Comments on articles
- Code repository updates
- Community discussions
Smart Data Integration
- Developer usernames
- Article titles
- Programming languages
- Engagement metrics
Drive Business Results
Showcase active community engagement to encourage participation, demonstrate platform vitality, and create a sense of belonging for developers visiting your site.
- Boost customer confidence with social proof
- Create urgency with real-time activity
- Increase conversion rates
- Enhance user engagement
Wall Configuration
Here are the exact settings used to create this demo wall in the VitalWall dashboard
Basic Settings
Layout Settings
Configure Your Own Wall
You can customize these same settings in your VitalWall dashboard when creating or editing your own walls. Each setting affects how your wall displays and behaves on your website.
Easy Implementation
Add this simple code snippet to your website and watch the magic happen
VitalWall offers two implementation approaches:
**Option 1: Simple Attribute-Based (No Coding Required)**
Perfect for non-developers and quick setup. Uses HTML attributes to automatically track events.
**Option 2: NPM Package (Developer-Friendly)**
Full programmatic control with TypeScript support, ideal for JavaScript applications and developers.
---
## Option 1: Simple Attribute-Based Implementation
<!-- STEP 1: Add VitalWall script -->
<script type="module">
const { default: VitalWall } = await import('https://unpkg.com/@vitalwall/client@latest/dist/index.esm.js');
const vitalWall = new VitalWall();
await vitalWall.init({
wallId: "your-wall-id",
apiKey: "your-api-key"
});
</script>
<!-- STEP 2: Add wall display container -->
<div data-vital-wall="your-wall-id"></div>
<!-- STEP 3: Track events with data attributes -->
<!-- Blog post publish button -->
<button data-vital-item="blog-publish"
data-vital-html="false"
data-vital-send-content="📝 New blog post published: 'Advanced React Patterns'">
Publish Post
</button>
<!-- Comment form -->
<form data-vital-item="blog-comment"
data-vital-html="false"
data-vital-send-content="💬 New comment on 'JavaScript Best Practices'">
<textarea name="comment"></textarea>
<button type="submit">Post Comment</button>
</form>
<!-- Article interaction buttons -->
<button data-vital-item="blog-clap"
data-vital-html="false"
data-vital-send-content="👏 5 claps for 'Understanding Node.js'">
👏 Clap
</button>
<!-- STEP 4: Style as needed -->
<!-- No custom CSS applied in this demo to match wall settings -->
---
## Option 2: NPM Package Implementation
<!-- STEP 1: Install NPM package -->
npm install @vitalwall/client
<!-- STEP 2: Import and initialize -->
<script type="module">
import VitalWall from '@vitalwall/client';
const wall = new VitalWall();
await wall.init({
wallId: 'your-wall-id',
apiKey: 'your-api-key'
});
// Track blog post publish
document.getElementById('publish-btn').addEventListener('click', async () => {
await wall.addTextItem('📝 New blog post published: "Advanced React Patterns"');
});
// Track comments
document.getElementById('comment-form').addEventListener('submit', async (e) => {
await wall.addTextItem('💬 New comment on "JavaScript Best Practices"');
});
// Track article claps
document.getElementById('clap-btn').addEventListener('click', async () => {
await wall.addTextItem('👏 5 claps for "Understanding Node.js"');
});
</script>
<!-- STEP 3: Add wall display container -->
<div data-vital-wall="your-wall-id"></div>
<!-- STEP 4: HTML structure -->
<button id="publish-btn">Publish Post</button>
<form id="comment-form">
<textarea name="comment"></textarea>
<button type="submit">Post Comment</button>
</form>
<button id="clap-btn">👏 Clap</button>
<!-- STEP 5: Style as needed -->
<!-- No custom CSS applied in this demo to match wall settings -->
---
## Example CSS Used in This Demo Wall
This demo wall uses the default VitalWall styling with no custom CSS applied.
The wall settings show an empty Custom CSS section (just placeholder text), which creates clean, minimal item displays perfect for developer content.
For developer community walls, consider these styling approaches:
- Keep text simple and readable for code-related content
- Use emoji and clear typography for quick scanning
- Consider dark themes popular with developers
- Ensure good contrast for accessibility
Note: Add CSS directly in your wall settings dashboard (no <style> tags needed in the wall editor).
See It In Action

Luxury E-commerce
Transform your High-end watch retailers, jewelry stores, luxury goods with real-time social proof
Website Interaction
- Product views
- Purchase notifications
- Stock level alerts
- Customer location display
- Price point visibility
Smart Data Integration
- Customer location
- Product details
- Purchase timestamp
- Stock levels
- View counts
Drive Business Results
Build trust and urgency through social proof by showing real-time customer activity and product popularity
- Boost customer confidence with social proof
- Create urgency with real-time activity
- Increase conversion rates
- Enhance user engagement
Wall Configuration
Here are the exact settings used to create this demo wall in the VitalWall dashboard
Basic Settings
Layout Settings
Configure Your Own Wall
You can customize these same settings in your VitalWall dashboard when creating or editing your own walls. Each setting affects how your wall displays and behaves on your website.
Easy Implementation
Add this simple code snippet to your website and watch the magic happen
<!-- Step 1: Add the wall display container -->
<div data-vital-wall="your-wall-id" style="height: 400px; border-radius: 8px; background: #fafafa;"></div>
<!-- Step 2: Initialize VitalWall with ES module import -->
<script type="module">
// Import VitalWall from the npm package
const { default: VitalWall } = await import('https://unpkg.com/@vitalwall/client@latest/dist/index.esm.js');
// Initialize VitalWall
const wall = VitalWall.init({
wallId: 'your-wall-id',
apiKey: 'your-api-key'
});
// Track luxury product views
document.addEventListener('click', (e) => {
if (e.target.matches('[data-vital-item="product-view"]')) {
const viewData = {
productName: e.target.dataset.productName,
brand: e.target.dataset.brand,
price: e.target.dataset.price,
viewerLocation: e.target.dataset.location,
exclusivityLevel: e.target.dataset.exclusivity
};
wall.track('product-view', {
content: JSON.stringify(viewData),
isHtml: false
});
}
});
</script>
<!-- Example: Track luxury product views -->
<button data-vital-item="product-view"
data-product-name="Rolex Submariner"
data-brand="Rolex"
data-price="$8,550"
data-location="New York, NY"
data-exclusivity="limited">
View Rolex Submariner
</button>
<button data-vital-item="product-view"
data-product-name="Omega Speedmaster"
data-brand="Omega"
data-price="$5,200"
data-location="Beverly Hills, CA"
data-exclusivity="exclusive">
View Omega Speedmaster
</button>
See It In Action

E-commerce & Retail
Transform your Online stores, marketplaces, subscription services with real-time social proof
Website Interaction
- Order placement
- Payment processing
- Status updates
- Customer details
- Product categories
Smart Data Integration
- Order ID
- Customer name & location
- Product purchased
- Order value
- Processing status
Drive Business Results
Showcase store activity and build customer confidence through live order notifications
- Boost customer confidence with social proof
- Create urgency with real-time activity
- Increase conversion rates
- Enhance user engagement
Wall Configuration
Here are the exact settings used to create this demo wall in the VitalWall dashboard
Basic Settings
Layout Settings
Configure Your Own Wall
You can customize these same settings in your VitalWall dashboard when creating or editing your own walls. Each setting affects how your wall displays and behaves on your website.
Easy Implementation
Add this simple code snippet to your website and watch the magic happen
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>E-commerce Store with Live Orders</title>
<script type="module">
const { default: VitalWall } = await import('https://unpkg.com/@vitalwall/client@latest/dist/index.esm.js');
const vitalWall = new VitalWall();
await vitalWall.init({
wallId: "your-wall-id",
apiKey: "your-api-key"
});
</script>
</head>
<body>
<!-- Your e-commerce site content -->
<div class="store-layout">
<header>
<h1>TechStore Pro</h1>
<nav>...</nav>
</header>
<main>
<!-- Product grid, categories, etc. -->
<div class="products-grid">
<!-- Product items with tracking -->
<div class="product-card"
data-vital-item="product-view"
data-vital-html="<div class='order-tile'>📱 iPhone 15 Pro viewed by user from California</div>">
<img src="iphone.jpg" alt="iPhone 15 Pro">
<h3>iPhone 15 Pro</h3>
<p>$999</p>
<button class="buy-btn"
data-vital-item="order-placed"
data-vital-html="<div class='order-tile'><div class='order-header'><span class='order-number'>#12345</span><span class='time-ago'>Just now</span></div><div class='customer'>Anonymous Customer</div><div class='product'>📱 iPhone 15 Pro</div><div class='order-footer'><span class='amount'>$999</span><span class='status success'>Completed</span></div></div>">
Buy Now
</button>
</div>
</div>
</main>
<!-- VitalWall Display Area -->
<div class="wall-container">
<h2>Recent Orders</h2>
<div data-vital-wall="your-recent-orders-wall-id"></div>
</div>
</div>
<script>
// Initialize VitalWall
VitalWall.init({
wallId: 'your-recent-orders-wall-id',
apiKey: 'your-api-key'
});
// Track custom events
document.addEventListener('DOMContentLoaded', function() {
// Track page views
VitalWall.track('page-view', {
content: '<div class="activity-item">🌐 New visitor browsing from New York</div>',
isHtml: true
});
// Track cart additions
document.querySelectorAll('.add-to-cart').forEach(button => {
button.addEventListener('click', function() {
const productName = this.dataset.product;
VitalWall.track('cart-add', {
content: `<div class="order-tile">🛒 ${productName} added to cart</div>`,
isHtml: true
});
});
});
});
</script>
<style>
.wall-container {
position: fixed;
top: 20px;
right: 20px;
width: 300px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
padding: 16px;
max-height: 400px;
overflow-y: auto;
}
.order-tile {
padding: 12px;
margin-bottom: 8px;
background: #f8f9fa;
border-radius: 6px;
border-left: 3px solid #28a745;
font-size: 14px;
}
</style>
</body>
</html>
See It In Action
