Demo Gallery

Experience the power of real-time engagement

Quick Navigation

Event Ticketing

Transform your Concert Ticket Sales Platform with real-time social proof

Increase Engagement
Drive Conversions
Real-time Updates

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

Wall Name:Event Ticketing
Active: Yes
Allow Scrolling: Yes
Display Limit:50 items

Layout Settings

Layout Style:
List View
Animation Style:Default
Custom CSS: Applied

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">
import VitalWall from '@vitalwall/client';

const vitalWall = new VitalWall();

// Initialize VitalWall
await vitalWall.init({
  apiKey: 'your-api-key',
  wallId: 'your-wall-id',
  debug: false  // optional - set to true to enable debug logging
});

// Function to track ticket purchases
async function trackTicketPurchase() {
  // Get ticket details from your purchase form
  const ticketData = {
    event: 'Journey',
    venue: 'Madison Square Garden', 
    section: 'A1',
    row: 15,
    seat: 12,
    showDate: 'SAT MAR 15 2025 8:00PM'
  };

  // Create the ticket HTML that will appear on your wall
  const ticketHTML = `
    <div class="ticket" style="--venue-color: #ff4b4b;">
      <div class="ticket-stub">
        <div class="stub-content">
          <div class="event-code">EVENT CODE<br>${ticketData.section}${ticketData.row}</div>
          <div class="stub-details">
            <div class="stub-item">SECTION/AISLE<br>${ticketData.section}</div>
            <div class="stub-item">ROW<br>${ticketData.row}</div>
            <div class="stub-item">SEAT<br>${ticketData.seat}</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>${ticketData.section}</span>
            <span>${ticketData.row}</span>
            <span>${ticketData.seat}</span>
          </div>
        </div>
        <div class="main-content">
          <div class="event-name">${ticketData.event}</div>
          <div class="venue-info">at ${ticketData.venue}</div>
          <div class="show-info">${ticketData.showDate}</div>
        </div>
        <div class="ticket-footer">
          <div class="section-indicators">
            <div class="indicator">
              <span>SEC</span>
              <strong>${ticketData.section}</strong>
            </div>
            <div class="indicator">
              <span>ROW</span>
              <strong>${ticketData.row}</strong>
            </div>
            <div class="indicator">
              <span>SEAT</span>
              <strong>${ticketData.seat}</strong>
            </div>
          </div>
          <div class="barcode"></div>
        </div>
      </div>
    </div>
  `;

  // Send ticket to wall using NPM package
  try {
    const itemId = await vitalWall.addHtmlItem(ticketHTML);
    console.log('Ticket added to wall:', itemId);
  } catch (error) {
    console.error('Failed to add ticket:', error);
  }
}

// Alternative: Add simple text items
async function trackSimpleTicketSale() {
  await vitalWall.addTextItem('New ticket sold: Journey at Madison Square Garden - Section A1, Row 15, Seat 12');
}

// Attach to purchase button
document.getElementById('purchase-btn').addEventListener('click', trackTicketPurchase);

// For multiple walls, you can specify wallId per item
await vitalWall.addHtmlItem(ticketHTML, 'specific-wall-id');

// Or change the current wall
vitalWall.setCurrentWall('another-wall-id');
await vitalWall.addTextItem('Sale notification for different wall');
</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 &lt;style&gt; 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

Increase Engagement
Drive Conversions
Real-time Updates

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

Wall Name:Developer Community Activity
Active: Yes
Allow Scrolling: Yes
Display Limit:10 items

Layout Settings

Layout Style:
List View
Animation Style:Bounce Effect

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 &lt;style&gt; 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

Increase Engagement
Drive Conversions
Real-time Updates

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

Wall Name:Social Proof Wall
Active: Yes
Allow Scrolling: Yes
Display Limit:10 items

Layout Settings

Layout Style:
List View
Animation Style:Default

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

Increase Engagement
Drive Conversions
Real-time Updates

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

Wall Name:Recent Orders Feed
Active: Yes
Allow Scrolling: Yes
Display Limit:10 items

Layout Settings

Layout Style:
List View
Animation Style:Default
Custom CSS: Applied

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