Intensify Digital API Documentation

This documentation provides details on how to use the Intensify Digital API via Curl to fetch sent messages from campaigns. The API allows retrieval of scheduled messages, including media and metadata, for display in various application formats such as social feeds, multimedia apps (i.e. images, videos, musics), TV-style streaming, or eLearning courses.

API Overview

The primary endpoint fetches sent messages for a specific campaign. It requires authentication via a Bearer token.

Endpoint: GET https://portal.intensifydigital.com/api/campaign/{campaignId}/messages/sent

Parameters:

campaignId: The ID of the campaign (required, integer).

Headers:

Authorization: Bearer {your_token} (required).
Content-Type: application/json (optional for GET).

Response: JSON array of messages, each containing fields like message, scheduled_at, media (array with location, thumbnail, mime_type), etc.

Error Handling: Check for HTTP status codes (e.g., 200 OK, 401 Unauthorized) and JSON decode errors.

Curl Command Example

Replace {campaignId} and {bearerToken} with your actual values.

curl -X GET \ "https://portal.intensifydigital.com/api/campaign/{campaignId}/messages/sent?page=1&limit=10&order=asc" \ -H "Authorization: Bearer {bearerToken}" \ -H "Content-Type: application/json"

Available URL request parameters:

Parameter	Sample Value	Description
`page`	`4`	An `int` that is the page that you are on. The default is `1`.
`limit`	`15`	An `int` that is the number of results returned. The default is `10`
`order`	`asc`	A `string` that orders the results are in (asc "ascending" or desc "descending") based on the time the message is sent. The default is `asc`

Parameter

Sample Value

Description

page

4

An int that is the page that you are on. The default is 1.

limit

15

An int that is the number of results returned. The default is 10

order

asc

A string that orders the results are in (asc "ascending" or desc "descending") based on the time the message is sent. The default is asc

Example Use Cases

Below are three PHP-based examples demonstrating how to integrate the API into different application styles. Each example fetches data from the API, processes it (e.g., sorting by date, generating slugs), and renders it in a user-friendly interface with dark/light theme support, modals for previews, pagination, and responsive design. Click "View Code" to see the full code in a modal for copy-pasting, or "Download Code" to download the file.

Example 1: Single Social Media Style Feed (socialapp.php)

Full Functionality Explanation

This demo creates a vertical feed resembling a social media app, focused on a single campaign created with Intensify Digital. Campaign is Intensify Digital's system term for a structured content feed, but it can also be used synonymously with channel or social feed. It uses cURL to fetch sent messages from the API endpoint https://portal.intensifydigital.com/api/campaign/{campaignId}/messages/sent. The JSON response is decoded, sorted by the scheduled_at field in descending order (newest first), and unique slugs are generated for each message based on its content for permalinks. If a ?post=slug query parameter is present in the URL, the script renders a single post view displaying the full message text, associated media (image or video with controls), a page title derived from the message (truncated to 60 characters), a theme toggle button (dark/light mode persisted via localStorage), and a back link to the main feed. In the default feed view, it presents a vertical column of tiles, each showing a thumbnail (or a placeholder if no media is available), a truncated message (50 characters), and the scheduled date converted from UTC to the user's local timezone using JavaScript. Clicking a tile opens a modal with fade-in/out transitions, a loading spinner, full media display (supporting both images and videos), the message as a clickable hyperlink to the single post view, and navigation arrows for previous/next messages within the same campaign. The modal also supports touch swipe gestures for navigation (left for next, right for previous). A theme toggle button allows switching between dark and light modes, with the preference saved in localStorage. Error handling includes checking for cURL errors and JSON decoding issues, displaying error messages or skipping faulty campaigns. The design is responsive, with tile sizes and layouts adjusting for smaller screens (e.g., increasing image height to 250px on screens <480px).

Download Code

Demo Preview

socialapp.php Code

<?php
// Add cache-busting headers to prevent browser caching
header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

// Define the campaigns with their IDs, corresponding bearer tokens, and custom titles
$campaigns = [
    ['id' => {campaignId}, 'token' => '{bearerToken}', 'title' => 'Prayers Before Bedtime'],
];

// Function to fetch messages for a single campaign with pagination
function getCampaignMessages($campaignId, $bearerToken, $page = 1, $limit = 10, $order = 'desc') {
    $url = "https://portal.intensifydigital.com/api/campaign/{$campaignId}/messages/sent";
    $queryParams = [];
    $queryParams[] = "page={$page}";
    $queryParams[] = "limit={$limit}";
    $queryParams[] = "order={$order}";
    $url .= '?' . implode('&', $queryParams);

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HTTPGET, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, array(
        "Authorization: Bearer {$bearerToken}",
        "Content-Type: application/json"
    ));

    $response = curl_exec($ch);

    if (curl_errno($ch)) {
        curl_close($ch);
        return ['error' => 'cURL Error for campaign ' . $campaignId . ': ' . curl_error($ch)];
    }
    curl_close($ch);

    $data = json_decode($response, true);
    if (json_last_error() !== JSON_ERROR_NONE) {
        return ['error' => 'JSON Decode Error for campaign ' . $campaignId . ': ' . json_last_error_msg()];
    }

    // Generate unique slugs
    $slugs = [];
    foreach ($data as &$m) {
        $baseSlug = preg_replace('/[^a-z0-9 ]/i', '', substr($m['message'] ?? 'N/A', 0, 50));
        $baseSlug = trim(strtolower(str_replace(' ', '-', $baseSlug)), '-');
        if ($baseSlug === '') $baseSlug = 'post';
        $timePart = preg_replace('/[^0-9]/', '', $m['scheduled_at'] ?? '0');
        $baseSlug = $timePart . '-' . $baseSlug;
        $slug = $baseSlug;
        $count = 1;
        while (isset($slugs[$slug])) {
            $slug = $baseSlug . '-' . $count;
            $count++;
        }
        $slugs[$slug] = true;
        $m['slug'] = $slug;
    }
    unset($m);

    return ['messages' => $data, 'total' => count($data)];
}

// Function to fetch initial or refresh data
function fetchCampaignData($page = 1, $limit = 10, $order = 'desc') {
    global $campaigns;
    $campaignsData = [];

    foreach ($campaigns as $campaignInfo) {
        $campaignId = $campaignInfo['id'];
        $bearerToken = $campaignInfo['token'];
        $campaignTitle = $campaignInfo['title'];

        $result = getCampaignMessages($campaignId, $bearerToken, $page, $limit, $order);

        if (isset($result['error'])) {
            $campaignsData[$campaignId] = ['error' => $result['error']];
        } else {
            $campaignsData[$campaignId] = [
                'messages' => $result['messages'],
                'title' => $campaignTitle,
                'total' => $result['total']
            ];
        }
    }

    return $campaignsData;
}

// Handle AJAX request for campaign data (refresh page 1)
if (isset($_GET['action']) && $_GET['action'] === 'fetch_campaigns') {
    header('Content-Type: application/json');
    $result = fetchCampaignData(1, 10, 'desc');
    echo json_encode($result);
    exit;
}

// Handle AJAX request for load more
if (isset($_GET['action']) && $_GET['action'] === 'load_more') {
    header('Content-Type: application/json');
    $campaignId = $_GET['campaign_id'] ?? null;
    $page = (int) ($_GET['page'] ?? 2);
    $limit = 10;
    $order = 'desc';

    $campaignInfo = null;
    foreach ($campaigns as $c) {
        if ($c['id'] == $campaignId) {
            $campaignInfo = $c;
            break;
        }
    }

    if (!$campaignInfo) {
        echo json_encode(['error' => 'Campaign not found']);
        exit;
    }

    $result = getCampaignMessages($campaignId, $campaignInfo['token'], $page, $limit, $order);

    if (isset($result['error'])) {
        echo json_encode(['error' => $result['error']]);
    } else {
        echo json_encode(['messages' => $result['messages'], 'total' => $result['total']]);
    }
    exit;
}

// Fetch initial data for page load
$singlePostMode = isset($_GET['post']);
$campaignsData = $singlePostMode ? fetchCampaignData(1, null, 'desc') : fetchCampaignData(1, 10, 'desc');

// Handle single post view if ?post=slug is in URL
$singlePost = null;
if ($singlePostMode) {
    $requestedSlug = $_GET['post'];
    foreach ($campaignsData as $campaignId => $campaign) {
        if (isset($campaign['error'])) continue;
        foreach ($campaign['messages'] as $message) {
            if ($message['slug'] === $requestedSlug) {
                $singlePost = $message;
                break 2;
            }
        }
    }
    if ($singlePost) {
        // Single post view
        $pageTitle = substr($singlePost['message'], 0, 60) . (strlen($singlePost['message']) > 60 ? '...' : '');
        ?>
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title><?php echo htmlspecialchars($pageTitle); ?></title>
            <style>
                body { font-family: Arial, sans-serif; margin: 0; padding: 20px; transition: background-color 0.3s, color 0.3s; }
                body.dark { background-color: #121212; color: #ffffff; }
                body.dark .single-post { background-color: #1e1e1e; color: #ffffff; }
                body.light { background-color: #f4f4f4; color: #000000; }
                body.light .single-post { background-color: #fefefe; color: #000000; }
                .single-post { margin: auto; padding: 20px; border: none; width: 90%; max-width: 800px; text-align: center; position: relative; transition: background-color 0.3s, color 0.3s; }
                .single-post img, .single-post video { max-width: 100%; height: auto; display: block; margin: 0 auto; }
                .single-post p { white-space: pre-wrap; text-align: left; margin-top: 20px; }
                #themeToggle { position: fixed; top: 10px; right: 10px; padding: 10px; border: none; border-radius: 5px; cursor: pointer; z-index: 1000; transition: background-color 0.3s, color 0.3s; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
                body.dark #themeToggle { background-color: #333; color: #fff; }
                body.light #themeToggle { background-color: #ddd; color: #000; }
                .theme-icon { width: 24px; height: 24px; fill: currentColor; }
                .back-link { display: block; text-align: center; margin-top: 20px; }
            </style>
        </head>
        <body>
            <button id="themeToggle" aria-label="Toggle theme">
                <svg id="sunIcon" class="theme-icon" style="display: none;" viewBox="0 0 24 24">
                    <circle cx="12" cy="12" r="5" fill="currentColor"/>
                    <line x1="12" y1="6" x2="12" y2="1" stroke="currentColor" stroke-width="2"/>
                    <line x1="12" y1="18" x2="12" y2="23" stroke="currentColor" stroke-width="2"/>
                    <line x1="6" y1="12" x2="1" y2="12" stroke="currentColor" stroke-width="2"/>
                    <line x1="18" y1="12" x2="23" y2="12" stroke="currentColor" stroke-width="2"/>
                    <line x1="7.5" y1="7.5" x2="4.3" y2="4.3" stroke="currentColor" stroke-width="2"/>
                    <line x1="16.5" y1="7.5" x2="19.7" y2="4.3" stroke="currentColor" stroke-width="2"/>
                    <line x1="7.5" y1="16.5" x2="4.3" y2="19.7" stroke="currentColor" stroke-width="2"/>
                    <line x1="16.5" y1="16.5" x2="19.7" y2="19.7" stroke="currentColor" stroke-width="2"/>
                </svg>
                <svg id="moonIcon" class="theme-icon" viewBox="0 0 24 24">
                    <path d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
                </svg>
            </button>
            <div class="single-post">
                <h1><?php echo htmlspecialchars($pageTitle); ?></h1>
                <?php if (!empty($singlePost['media']) && is_array($singlePost['media'])): ?>
                    <?php $mediaItem = $singlePost['media'][0]; ?>
                    <?php if (strpos($mediaItem['mime_type'], 'video/') === 0): ?>
                        <video controls src="<?php echo htmlspecialchars($mediaItem['location']); ?>"></video>
                    <?php else: ?>
                        <img src="<?php echo htmlspecialchars($mediaItem['location']); ?>" alt="Full Image">
                    <?php endif; ?>
                <?php else: ?>
                    <p>No media available</p>
                <?php endif; ?>
                <p><?php echo htmlspecialchars($singlePost['message'] ?? 'N/A'); ?></p>
                <a href="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" class="back-link">Back to Feed</a>
            </div>
            <script>
                // Theme toggle logic for single post page
                const body = document.body;
                const themeToggle = document.getElementById('themeToggle');
                const sunIcon = document.getElementById('sunIcon');
                const moonIcon = document.getElementById('moonIcon');
                let currentTheme = localStorage.getItem('theme') || 'dark';
                body.classList.add(currentTheme);
                sunIcon.style.display = currentTheme === 'dark' ? 'block' : 'none';
                moonIcon.style.display = currentTheme === 'dark' ? 'none' : 'block';

                themeToggle.addEventListener('click', () => {
                    body.classList.toggle('dark');
                    body.classList.toggle('light');
                    currentTheme = body.classList.contains('dark') ? 'dark' : 'light';
                    sunIcon.style.display = currentTheme === 'dark' ? 'block' : 'none';
                    moonIcon.style.display = currentTheme === 'dark' ? 'none' : 'block';
                    localStorage.setItem('theme', currentTheme);
                });
            </script>
        </body>
        </html>
        <?php
        exit;
    }
}

// Feed view (default)
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API Example: Social App</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 20px; transition: background-color 0.3s, color 0.3s; }
        body.dark { background-color: #121212; color: #ffffff; }
        body.light { background-color: #f4f4f4; color: #000000; }
        h1 { text-align: left; }
        h2 { text-align: left; margin-top: 40px; }
        .error { color: red; text-align: center; }

        /* Vertical tile column */
        .tile-column { display: flex; flex-direction: column; align-items: center; gap: 15px; padding: 10px 0; }

        /* Tile styles */
        .tile { flex: 0 0 auto; width: 250px; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.1); cursor: pointer; transition: background-color 0.3s, color 0.3s; }
        body.dark .tile { background: #1e1e1e; }
        body.light .tile { background: white; }
        .tile img { width: 100%; height: 150px; object-fit: cover; }
        .tile .placeholder { width: 100%; height: 150px; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s, color 0.3s; }
        body.dark .tile .placeholder { background: #333; color: #bbb; }
        body.light .tile .placeholder { background: #ddd; color: #666; }
        .tile .tile-content { padding: 10px; }
        .tile .tile-message { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .tile .tile-scheduled { font-size: 12px; opacity: 0.7; }

        /* Modal styles */
        .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; justify-content: center; align-items: center; transition: background-color 0.3s; }
        body.dark .modal { background-color: rgba(0,0,0,0.9); }
        body.light .modal { background-color: rgba(255,255,255,0.8); }
        .modal-content { margin: auto; padding: 20px; border: none; width: 90%; max-width: 800px; height: 100%; text-align: center; position: relative; transition: background-color 0.3s, color 0.3s; overflow-y: auto; }
        body.dark .modal-content { background-color: #1e1e1e; color: #ffffff; }
        body.light .modal-content { background-color: #fefefe; color: #000000; }
        .media-wrapper { position: relative; display: inline-block; margin: 0 auto; max-width: 100%; }
        .modal-img, .modal-video { max-width: 100%; height: auto; display: none; position: relative; z-index: 1; opacity: 1; transition: opacity 0.3s ease; }
        .no-media { margin: 20px 0; font-size: 18px; display: none; }
        body.dark .no-media { color: #bbb; }
        body.light .no-media { color: #666; }
        .modal-message { margin-top: 20px; white-space: pre-wrap; text-align: left; max-height: 200px; overflow-y: auto; }
        .close { font-size: 28px; font-weight: bold; cursor: pointer; position: absolute; top: 15px; right: 15px; z-index: 3; color: inherit; transition: color 0.3s; }
        body.dark .close { color: #fff; }
        body.light .close { color: #000; }
        .close:hover, .close:focus { color: #ddd; text-decoration: none; }
        
        /* Arrow styles */
        .arrow { position: absolute; top: 50%; transform: translateY(-50%); font-size: 40px; cursor: pointer; background-color: rgba(0,0,0,0.5); padding: 10px; z-index: 10; transition: color 0.3s; }
        body.dark .arrow { color: #fff; }
        body.light .arrow { color: #000; background-color: rgba(255,255,255,0.5); }
        .arrow:hover { background-color: rgba(0,0,0,0.8); }
        body.light .arrow:hover { background-color: rgba(255,255,255,0.8); }
        .prev { left: 10px; }
        .next { right: 10px; }

        /* Loading spinner styles */
        .loading-spinner { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border: 4px solid rgba(255,255,255,0.1); border-top-color: #ffffff; border-radius: 50%; animation: spin 1s linear infinite; z-index: 2; }
        body.light .loading-spinner { border: 4px solid rgba(0,0,0,0.1); border-top-color: #000000; }
        @keyframes spin {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }

        /* Theme toggle button */
        #themeToggle { position: fixed; top: 10px; right: 10px; padding: 10px; border: none; border-radius: 5px; cursor: pointer; z-index: 1000; transition: background-color 0.3s, color 0.3s; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
        body.dark #themeToggle { background-color: #333; color: #fff; }
        body.light #themeToggle { background-color: #ddd; color: #000; }
        .theme-icon { width: 24px; height: 24px; fill: currentColor; }

        /* Sentinel for infinite scroll */
        .sentinel { height: 20px; }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .tile { width: 200px; }
            .tile img, .tile .placeholder { height: 120px; }
            .modal-content { width: 95%; padding: 50px 10px 10px 10px; }
            .arrow { display: none !important; }
            .modal-content { overflow-y: auto; text-align: left; }
            #modalMobileView { overflow-y: auto; height: auto; }
            .post-item { margin-bottom: 20px; border-bottom: 1px solid #ddd; padding-bottom: 20px; }
            body.dark .post-item { border-bottom: 1px solid #333; }
            .post-media img, .post-media video { max-width: 100%; height: auto; }
            .post-message { white-space: pre-wrap; }
            .close { top: 0; }
        }

        @media (max-width: 480px) {
            .tile img, .tile .placeholder { height: 250px; }
            .tile .tile-message { font-size: 14px; }
            .tile .tile-scheduled { font-size: 10px; }
        }
    </style>
</head>
<body>
    <button id="themeToggle" aria-label="Toggle theme">
        <svg id="sunIcon" class="theme-icon" style="display: none;" viewBox="0 0 24 24">
            <circle cx="12" cy="12" r="5" fill="currentColor"/>
            <line x1="12" y1="6" x2="12" y2="1" stroke="currentColor" stroke-width="2"/>
            <line x1="12" y1="18" x2="12" y2="23" stroke="currentColor" stroke-width="2"/>
            <line x1="6" y1="12" x2="1" y2="12" stroke="currentColor" stroke-width="2"/>
            <line x1="18" y1="12" x2="23" y2="12" stroke="currentColor" stroke-width="2"/>
            <line x1="7.5" y1="7.5" x2="4.3" y2="4.3" stroke="currentColor" stroke-width="2"/>
            <line x1="16.5" y1="7.5" x2="19.7" y2="4.3" stroke="currentColor" stroke-width="2"/>
            <line x1="7.5" y1="16.5" x2="4.3" y2="19.7" stroke="currentColor" stroke-width="2"/>
            <line x1="16.5" y1="16.5" x2="19.7" y2="19.7" stroke="currentColor" stroke-width="2"/>
        </svg>
        <svg id="moonIcon" class="theme-icon" viewBox="0 0 24 24">
            <path d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
        </svg>
    </button>
    
    <div id="campaigns-container">
    <?php foreach ($campaignsData as $campaignId => $campaign): ?>
        <?php if (isset($campaign['error'])): ?>
            <p class="error"><?php echo htmlspecialchars($campaign['error']); ?></p>
        <?php else: ?>
            <?php $messages = $campaign['messages']; $title = $campaign['title']; ?>
            <?php if (empty($messages) || !is_array($messages)): ?>
                <p class="error">No messages found for channel <?php echo $campaignId; ?> or invalid response format.</p>
            <?php else: ?>
                <h2><?php echo htmlspecialchars($title); ?></h2>
                <div class="tile-column" data-campaign-id="<?php echo $campaignId; ?>" data-current-page="1" data-total-messages="<?php echo $campaign['total']; ?>">
                    <?php foreach ($messages as $localIndex => $message): ?>
                        <div class="tile" data-index="<?php echo $localIndex; ?>" data-campaign="<?php echo $campaignId; ?>">
                            <?php if (!empty($message['media']) && is_array($message['media'])): ?>
                                <img src="<?php echo htmlspecialchars($message['media'][0]['thumbnail'] ?? ''); ?>" alt="Thumbnail">
                            <?php else: ?>
                                <div class="placeholder">No Media</div>
                            <?php endif; ?>
                            <div class="tile-content">
                                <p class="tile-message"><?php echo htmlspecialchars(substr($message['message'] ?? 'N/A', 0, 50)) . '...'; ?></p>
                                <p class="tile-scheduled" data-utc="<?php echo htmlspecialchars($message['scheduled_at'] ?? 'N/A'); ?>"><?php echo htmlspecialchars($message['scheduled_at'] ?? 'N/A'); ?></p>
                            </div>
                        </div>
                    <?php endforeach; ?>
                    <div class="sentinel"></div>
                </div>
            <?php endif; ?>
        <?php endif; ?>
    <?php endforeach; ?>
    </div>

    <!-- Modal structure -->
    <div id="imageModal" class="modal">
        <div class="modal-content">
            <span class="close">×</span>
            <div id="modalDesktopView" class="media-wrapper">
                <img id="modalImg" class="modal-img" src="" alt="Full Image">
                <video id="modalVideo" class="modal-video" controls></video>
                <span id="prevArrow" class="arrow prev">❮</span>
                <span id="nextArrow" class="arrow next">❯</span>
            </div>
            <div class="loading-spinner"></div>
            <p id="noMedia" class="no-media">No media available</p>
            <p id="modalMessage" class="modal-message"></p>
        </div>
    </div>

    <script>
        // Convert UTC dates to local time zone
        function updateDates() {
            document.querySelectorAll('.tile-scheduled').forEach(elem => {
                const utcDate = elem.dataset.utc;
                if (utcDate && utcDate !== 'N/A') {
                    const localDate = new Date(utcDate).toLocaleString();
                    elem.textContent = localDate;
                }
            });
        }
        updateDates();

        // Theme toggle logic
        const body = document.body;
        const themeToggle = document.getElementById('themeToggle');
        const sunIcon = document.getElementById('sunIcon');
        const moonIcon = document.getElementById('moonIcon');
        let currentTheme = localStorage.getItem('theme') || 'dark';
        body.classList.add(currentTheme);
        sunIcon.style.display = currentTheme === 'dark' ? 'block' : 'none';
        moonIcon.style.display = currentTheme === 'dark' ? 'none' : 'block';

        themeToggle.addEventListener('click', () => {
            body.classList.toggle('dark');
            body.classList.toggle('light');
            currentTheme = body.classList.contains('dark') ? 'dark' : 'light';
            sunIcon.style.display = currentTheme === 'dark' ? 'block' : 'none';
            moonIcon.style.display = currentTheme === 'dark' ? 'none' : 'block';
            localStorage.setItem('theme', currentTheme);
            console.log('Theme toggled to:', currentTheme);
        });

        // Modal elements
        const modal = document.getElementById('imageModal');
        const modalImg = document.getElementById('modalImg');
        const modalVideo = document.getElementById('modalVideo');
        const noMediaElem = document.getElementById('noMedia');
        const modalMessage = document.getElementById('modalMessage');
        const closeBtn = document.getElementsByClassName('close')[0];
        const prevArrow = document.getElementById('prevArrow');
        const nextArrow = document.getElementById('nextArrow');
        const mediaWrapper = document.getElementById('modalDesktopView');
        const loadingSpinner = document.querySelector('.loading-spinner');

        let campaignsSlides = <?php echo json_encode(array_map(function($c) { return isset($c['messages']) ? $c['messages'] : []; }, $campaignsData)); ?>;
        let currentIndex = 0;
        let touchStartX = 0;
        let touchEndX = 0;

        // Function to show slide at given index with fade
        function showSlide(index) {
            const currentMedia = modalImg.style.display === 'block' ? modalImg : (modalVideo.style.display === 'block' ? modalVideo : null);
            if (currentMedia) {
                currentMedia.style.opacity = '0';
            }

            setTimeout(() => {
                currentIndex = (index + allSlides.length) % allSlides.length;
                const slide = allSlides[currentIndex];
                const postUrl = window.location.origin + window.location.pathname + '?post=' + slide.slug;
                modalMessage.innerHTML = '<a href="' + postUrl + '" style="text-decoration: none; color: inherit;">' + (slide.message || 'N/A') + '</a>';

                modalImg.style.display = 'none';
                modalVideo.style.display = 'none';
                noMediaElem.style.display = 'none';
                loadingSpinner.style.display = 'none';
                modalVideo.pause();

                if (slide.media && slide.media.length > 0) {
                    mediaWrapper.style.display = 'inline-block';
                    const mediaItem = slide.media[0];
                    loadingSpinner.style.display = 'block';
                    let mediaElement;
                    if (mediaItem.mime_type && mediaItem.mime_type.startsWith('video/')) {
                        mediaElement = modalVideo;
                        mediaElement.src = mediaItem.location;
                        mediaElement.addEventListener('loadeddata', () => {
                            loadingSpinner.style.display = 'none';
                            mediaElement.style.display = 'block';
                            mediaElement.style.opacity = '0';
                            setTimeout(() => { mediaElement.style.opacity = '1'; }, 10);
                        }, {once: true});
                    } else {
                        mediaElement = modalImg;
                        mediaElement.src = mediaItem.location;
                        mediaElement.addEventListener('load', () => {
                            loadingSpinner.style.display = 'none';
                            mediaElement.style.display = 'block';
                            mediaElement.style.opacity = '0';
                            setTimeout(() => { mediaElement.style.opacity = '1'; }, 10);
                        }, {once: true});
                    }
                } else {
                    noMediaElem.style.display = 'block';
                }
            }, 300);
        }

        // Add click events to tiles
        function addTileEventListeners() {
            document.querySelectorAll('.tile').forEach(tile => {
                tile.removeEventListener('click', tileClickHandler);
                tile.addEventListener('click', tileClickHandler);
            });
        }

        function tileClickHandler() {
            const campaignId = this.dataset.campaign;
            currentIndex = parseInt(this.dataset.index);
            allSlides = campaignsSlides[campaignId] || [];
            console.log('Tile clicked:', { campaignId, currentIndex, allSlides });
            if (allSlides.length === 0) return;
            modal.style.display = 'flex';
            themeToggle.style.display = 'none';
            mediaWrapper.style.display = 'inline-block';
            modalMessage.style.display = 'block';
            noMediaElem.style.display = 'block';
            showSlide(currentIndex);
            if (allSlides.length > 1) {
                prevArrow.style.display = 'block';
                nextArrow.style.display = 'block';
            } else {
                prevArrow.style.display = 'none';
                nextArrow.style.display = 'none';
            }
        }

        // Function to load more for a campaign
        function loadMore(campaignId, nextPage) {
            fetch(`?action=load_more&campaign_id=${campaignId}&page=${nextPage}&limit=10&order=desc`, {
                headers: {
                    'Cache-Control': 'no-cache'
                }
            })
            .then(response => {
                if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
                return response.json();
            })
            .then(data => {
                if (data.error) {
                    console.error('Error loading more:', data.error);
                    return;
                }
                const messages = data.messages;
                const total = data.total;
                const column = document.querySelector(`.tile-column[data-campaign-id="${campaignId}"]`);
                const sentinel = column.querySelector('.sentinel');
                const baseIndex = parseInt(column.dataset.totalMessages || '0');

                if (messages.length === 0) {
                    observer.unobserve(sentinel);
                    return;
                }

                const newTilesHtml = messages.map((message, idx) => `
                    <div class="tile" data-index="${baseIndex + idx}" data-campaign="${campaignId}">
                        ${message.media && message.media.length > 0 ? `<img src="${message.media[0].thumbnail || ''}" alt="Thumbnail">` : `<div class="placeholder">No Media</div>`}
                        <div class="tile-content">
                            <p class="tile-message">${message.message ? message.message.substring(0, 50) + '...' : 'N/A'}</p>
                            <p class="tile-scheduled" data-utc="${message.scheduled_at || 'N/A'}">${message.scheduled_at || 'N/A'}</p>
                        </div>
                    </div>
                `).join('');

                sentinel.insertAdjacentHTML('beforebegin', newTilesHtml);

                campaignsSlides[campaignId].push(...messages);
                column.dataset.totalMessages = parseInt(column.dataset.totalMessages || '0') + messages.length;
                column.dataset.currentPage = nextPage;

                updateDates();
                addTileEventListeners();

                if (total < 10) {
                    observer.unobserve(sentinel);
                } else {
                    observer.observe(sentinel);
                }
            })
            .catch(error => {
                console.error('Load more error:', error);
            });
        }

        // Function to update with new posts from refresh
        function updateNewPosts(campaignsData) {
            Object.keys(campaignsData).forEach(campaignId => {
                const newMessages = campaignsData[campaignId].messages || [];
                const currentSlides = campaignsSlides[campaignId] || [];
                if (currentSlides.length === 0) return;

                let addThese = [];
                const existingFirst = currentSlides[0];

                for (let msg of newMessages) {
                    if (msg.scheduled_at === existingFirst.scheduled_at && msg.message === existingFirst.message) {
                        break;
                    }
                    addThese.push(msg);
                }

                if (addThese.length > 0) {
                    campaignsSlides[campaignId].unshift(...addThese);

                    const column = document.querySelector(`.tile-column[data-campaign-id="${campaignId}"]`);

                    const newTilesHtml = addThese.map((msg, idx) => `
                        <div class="tile" data-index="${idx}" data-campaign="${campaignId}">
                            ${msg.media && msg.media.length > 0 ? `<img src="${msg.media[0].thumbnail || ''}" alt="Thumbnail">` : `<div class="placeholder">No Media</div>`}
                            <div class="tile-content">
                                <p class="tile-message">${msg.message ? msg.message.substring(0, 50) + '...' : 'N/A'}</p>
                                <p class="tile-scheduled" data-utc="${msg.scheduled_at || 'N/A'}">${msg.scheduled_at || 'N/A'}</p>
                            </div>
                        </div>
                    `).join('');

                    column.insertAdjacentHTML('afterbegin', newTilesHtml);

                    const tiles = column.querySelectorAll('.tile');
                    tiles.forEach((tile, i) => {
                        tile.dataset.index = i;
                    });

                    column.dataset.totalMessages = parseInt(column.dataset.totalMessages || '0') + addThese.length;

                    addTileEventListeners();
                    updateDates();
                }
            });
        }

        // Fetch new data periodically for new posts
        function fetchNewCampaignData() {
            console.log('Fetching new campaign data at', new Date().toLocaleString());
            fetch('?action=fetch_campaigns', {
                headers: {
                    'Cache-Control': 'no-cache'
                }
            })
            .then(response => {
                if (!response.ok) throw new Error(`HTTP error! Status: ${response.status}`);
                return response.json();
            })
            .then(data => {
                console.log('Fetch new response:', data);
                updateNewPosts(data);
            })
            .catch(error => {
                console.error('Fetch new error:', error);
            });
        }

        // Intersection Observer for infinite scroll
        const observer = new IntersectionObserver(entries => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const column = entry.target.parentElement;
                    const campaignId = column.dataset.campaignId;
                    const currentPage = parseInt(column.dataset.currentPage || '1');
                    loadMore(campaignId, currentPage + 1);
                }
            });
        }, { threshold: 0.1 });

        // Set up
        document.addEventListener('DOMContentLoaded', () => {
            addTileEventListeners();
            const sentinels = document.querySelectorAll('.sentinel');
            sentinels.forEach(sentinel => {
                observer.observe(sentinel);
            });
            fetchNewCampaignData(); // Initial new fetch
        });

        // Set interval for periodic refresh
        setInterval(fetchNewCampaignData, 300000);

        // Previous arrow click
        prevArrow.addEventListener('click', () => {
            showSlide(currentIndex - 1);
        });

        // Next arrow click
        nextArrow.addEventListener('click', () => {
            showSlide(currentIndex + 1);
        });

        // Swipe support for modal
        modal.addEventListener('touchstart', (e) => {
            touchStartX = e.changedTouches[0].screenX;
        });

        modal.addEventListener('touchend', (e) => {
            touchEndX = e.changedTouches[0].screenX;
            if (touchStartX - touchEndX > 50) {
                showSlide(currentIndex + 1);
            } else if (touchEndX - touchStartX > 50) {
                showSlide(currentIndex - 1);
            }
        });

        // Close modal
        closeBtn.addEventListener('click', () => {
            modal.style.display = 'none';
            themeToggle.style.display = 'block';
            modalVideo.pause();
        });
        window.addEventListener('click', (event) => {
            if (event.target === modal) {
                modal.style.display = 'none';
                themeToggle.style.display = 'block';
                modalVideo.pause();
            }
        });
    </script>
</body>
</html>

Example 2: Multi-Channel Streaming TV Feed (streamingtv.php)

Full Functionality Explanation

This demo emulates a streaming TV interface, supporting multiple campaigns. Campaign is Intensify Digital's system term for a structured content feed, but it can also be used synonymously with channel, chapter, or shows. It uses cURL to fetch messages for each campaign from the API, decodes the JSON response, sorts messages by scheduled_at (newest first), and generates slugs. The single post view is identical to the first example, showing the full message, media, theme toggle, and back link. The default feed view organizes messages into horizontal scrolling rows (one per campaign) in a Netflix-style layout, with smooth scrolling enabled by drag momentum on desktop (using mouse events with velocity and friction for a natural feel) and touch scrolling on mobile. Each tile displays a thumbnail (or placeholder), a truncated message, and the scheduled date in local time. Clicking a tile opens a modal with fade transitions, a loading spinner, full media display, a message linked to the single post view, and navigation arrows/swipes for browsing messages within the campaign. Touch swipe gestures are supported in the modal. The theme toggle persists dark/light modes via localStorage. The scrolling mechanism includes advanced JavaScript for momentum-based scrolling, where the row continues moving slightly after the user stops dragging, slowing down with friction. The design is responsive, with tile sizes shrinking (e.g., 200px width, 120px height on screens <480px) for smaller devices. Error handling displays cURL or JSON errors as messages on the page.

Download Code

Demo Preview

streamingtv.php Code


<?php
// Define the campaigns with their IDs, corresponding bearer tokens, and custom titles
$campaigns = [
    ['id' => {campaignId}, 'token' => '{bearerToken}', 'title' => 'Prayers Before Bedtime'],
    ['id' => {campaignId}, 'token' => '{bearerToken}', 'title' => "Hero's Journey The Series"],
];

// Handle AJAX requests for loading more messages
if (isset($_GET['ajax']) && $_GET['ajax'] == '1' && isset($_GET['campaign']) && isset($_GET['page'])) {
    $campaignId = filter_var($_GET['campaign'], FILTER_VALIDATE_INT);
    $page = filter_var($_GET['page'], FILTER_VALIDATE_INT);
    if (!$campaignId || !$page) {
        echo json_encode(['error' => 'Invalid campaign or page']);
        exit;
    }

    $bearerToken = null;
    foreach ($campaigns as $campaignInfo) {
        if ($campaignInfo['id'] == $campaignId) {
            $bearerToken = $campaignInfo['token'];
            break;
        }
    }

    if ($bearerToken === null) {
        echo json_encode(['error' => 'Campaign not found']);
        exit;
    }

    // Initialize cURL session
    $ch = curl_init();
    $url = "https://portal.intensifydigital.com/api/campaign/{$campaignId}/messages/sent?limit=10&page={$page}&order=desc";
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HTTPGET, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, [
        "Authorization: Bearer {$bearerToken}",
        "Content-Type: application/json"
    ]);

    $response = curl_exec($ch);

    if (curl_errno($ch)) {
        echo json_encode(['error' => curl_error($ch)]);
        curl_close($ch);
        exit;
    }

    curl_close($ch);

    $data = json_decode($response, true);
    if (json_last_error() !== JSON_ERROR_NONE) {
        echo json_encode(['error' => json_last_error_msg()]);
        exit;
    }

    // Generate slugs using campaign ID and message ID
    foreach ($data as &$m) {
        $m['slug'] = $campaignId . '-' . ($m['id'] ?? uniqid());
    }

    echo json_encode($data);
    exit;
}

// Initialize an array to hold data for each campaign (initial page only)
$campaignsData = [];
foreach ($campaigns as $campaignInfo) {
    $campaignId = $campaignInfo['id'];
    $bearerToken = $campaignInfo['token'];
    $campaignTitle = $campaignInfo['title'];

    // Initialize cURL session
    $ch = curl_init();
    $url = "https://portal.intensifydigital.com/api/campaign/{$campaignId}/messages/sent?limit=10&page=1&order=desc";
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_HTTPGET, true);
    curl_setopt($ch, CURLOPT_HTTPHEADER, [
        "Authorization: Bearer {$bearerToken}",
        "Content-Type: application/json"
    ]);

    $response = curl_exec($ch);

    if (curl_errno($ch)) {
        $campaignsData[$campaignId] = ['messages' => [], 'title' => $campaignTitle, 'error' => curl_error($ch)];
        curl_close($ch);
        continue;
    }

    curl_close($ch);

    $data = json_decode($response, true);
    if (json_last_error() !== JSON_ERROR_NONE) {
        $campaignsData[$campaignId] = ['messages' => [], 'title' => $campaignTitle, 'error' => json_last_error_msg()];
        continue;
    }

    // Generate slugs using campaign ID and message ID
    foreach ($data as &$m) {
        $m['slug'] = $campaignId . '-' . ($m['id'] ?? uniqid());
    }

    $campaignsData[$campaignId] = ['messages' => $data, 'title' => $campaignTitle, 'error' => null];
}

// Handle single post view if ?post=slug is in URL
$singlePost = null;
if (isset($_GET['post'])) {
    $requestedSlug = filter_var($_GET['post'], FILTER_SANITIZE_STRING);
    $slugParts = explode('-', $requestedSlug, 2);
    if (count($slugParts) === 2) {
        $campaignId = filter_var($slugParts[0], FILTER_VALIDATE_INT);
        $messageId = $slugParts[1];
        $bearerToken = null;
        $campaignTitle = '';

        foreach ($campaigns as $campaignInfo) {
            if ($campaignInfo['id'] == $campaignId) {
                $bearerToken = $campaignInfo['token'];
                $campaignTitle = $campaignInfo['title'];
                break;
            }
        }

        if ($bearerToken !== null) {
            $ch = curl_init();
            $url = "https://portal.intensifydigital.com/api/campaign/{$campaignId}/messages/sent?id={$messageId}";
            curl_setopt($ch, CURLOPT_URL, $url);
            curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
            curl_setopt($ch, CURLOPT_HTTPGET, true);
            curl_setopt($ch, CURLOPT_HTTPHEADER, [
                "Authorization: Bearer {$bearerToken}",
                "Content-Type: application/json"
            ]);

            $response = curl_exec($ch);

            if (!curl_errno($ch)) {
                $data = json_decode($response, true);
                if (json_last_error() === JSON_ERROR_NONE && !empty($data) && is_array($data)) {
                    $singlePost = $data[0];
                    $singlePost['slug'] = $requestedSlug;
                }
            }
            curl_close($ch);
        }
    }

    if ($singlePost) {
        $pageTitle = substr($singlePost['message'], 0, 60) . (strlen($singlePost['message']) > 60 ? '...' : '');
        ?>
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title><?php echo htmlspecialchars($pageTitle); ?></title>
            <style>
                body { font-family: Arial, sans-serif; margin: 0; padding: 20px; transition: background-color 0.3s, color 0.3s; }
                body.dark { background-color: #121212; color: #ffffff; }
                body.dark .single-post { background-color: #1e1e1e; color: #ffffff; }
                body.light { background-color: #f4f4f4; color: #000000; }
                body.light .single-post { background-color: #fefefe; color: #000000; }
                .single-post { margin: auto; padding: 20px; border: none; width: 90%; max-width: 800px; text-align: center; position: relative; transition: background-color 0.3s, color 0.3s; }
                .single-post img, .single-post video { max-width: 100%; height: auto; display: block; margin: 0 auto; }
                .single-post p { white-space: pre-wrap; text-align: left; margin-top: 20px; }
                #themeToggle { position: fixed; top: 10px; right: 10px; padding: 10px; border: none; border-radius: 5px; cursor: pointer; z-index: 1000; transition: background-color 0.3s, color 0.3s; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
                body.dark #themeToggle { background-color: #333; color: #fff; }
                body.light #themeToggle { background-color: #ddd; color: #000; }
                .theme-icon { width: 24px; height: 24px; fill: currentColor; }
                .back-link { display: block; text-align: center; margin-top: 20px; }
            </style>
        </head>
        <body>
            <button id="themeToggle" aria-label="Toggle theme">
                <svg id="sunIcon" class="theme-icon" style="display: none;" viewBox="0 0 24 24">
                    <circle cx="12" cy="12" r="5" fill="currentColor"/>
                    <line x1="12" y1="6" x2="12" y2="1" stroke="currentColor" stroke-width="2"/>
                    <line x1="12" y1="18" x2="12" y2="23" stroke="currentColor" stroke-width="2"/>
                    <line x1="6" y1="12" x2="1" y2="12" stroke="currentColor" stroke-width="2"/>
                    <line x1="18" y1="12" x2="23" y2="12" stroke="currentColor" stroke-width="2"/>
                    <line x1="7.5" y1="7.5" x2="4.3" y2="4.3" stroke="currentColor" stroke-width="2"/>
                    <line x1="16.5" y1="7.5" x2="19.7" y2="4.3" stroke="currentColor" stroke-width="2"/>
                    <line x1="7.5" y1="16.5" x2="4.3" y2="19.7" stroke="currentColor" stroke-width="2"/>
                    <line x1="16.5" y1="16.5" x2="19.7" y2="19.7" stroke="currentColor" stroke-width="2"/>
                </svg>
                <svg id="moonIcon" class="theme-icon" viewBox="0 0 24 24">
                    <path d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
                </svg>
            </button>
            <div class="single-post">
                <h1><?php echo htmlspecialchars($pageTitle); ?></h1>
                <?php if (!empty($singlePost['media']) && is_array($singlePost['media'])): ?>
                    <?php $mediaItem = $singlePost['media'][0]; ?>
                    <?php if (strpos($mediaItem['mime_type'], 'video/') === 0): ?>
                        <video controls src="<?php echo htmlspecialchars($mediaItem['location']); ?>"></video>
                    <?php else: ?>
                        <img src="<?php echo htmlspecialchars($mediaItem['location']); ?>" alt="Full Image">
                    <?php endif; ?>
                <?php else: ?>
                    <p>No media available</p>
                <?php endif; ?>
                <p><?php echo htmlspecialchars($singlePost['message'] ?? 'N/A'); ?></p>
                <a href="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" class="back-link">Back to Feed</a>
            </div>
            <script>
                const body = document.body;
                const themeToggle = document.getElementById('themeToggle');
                const sunIcon = document.getElementById('sunIcon');
                const moonIcon = document.getElementById('moonIcon');
                const currentTheme = localStorage.getItem('theme') || 'dark';
                body.classList.add(currentTheme);
                sunIcon.style.display = currentTheme === 'dark' ? 'block' : 'none';
                moonIcon.style.display = currentTheme === 'dark' ? 'none' : 'block';

                themeToggle.addEventListener('click', () => {
                    if (body.classList.contains('dark')) {
                        body.classList.replace('dark', 'light');
                        sunIcon.style.display = 'none';
                        moonIcon.style.display = 'block';
                        localStorage.setItem('theme', 'light');
                    } else {
                        body.classList.replace('light', 'dark');
                        sunIcon.style.display = 'block';
                        moonIcon.style.display = 'none';
                        localStorage.setItem('theme', 'dark');
                    }
                });
            </script>
        </body>
        </html>
        <?php
        exit;
    }
}

// Feed view (default)
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API Example: Streaming TV</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; padding: 20px; transition: background-color 0.3s, color 0.3s; }
        body.dark { background-color: #121212; color: #ffffff; }
        body.light { background-color: #f4f4f4; color: #000000; }
        h1 { text-align: left; }
        h2 { text-align: left; margin-top: 40px; }
        .error { color: red; text-align: center; }

        .tile-row { display: flex; overflow-x: auto; gap: 15px; padding: 10px 0; cursor: grab; user-select: none; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
        .tile-row:active { cursor: grabbing; }
        .tile-row::-webkit-scrollbar { height: 8px; }
        .tile-row::-webkit-scrollbar-thumb { background: #888; border-radius: 10px; }
        .tile-row::-webkit-scrollbar-thumb:hover { background: #555; }

        .tile { flex: 0 0 250px; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.1); cursor: pointer; transition: background-color 0.3s, color 0.3s; scroll-snap-align: start; }
        body.dark .tile { background: #1e1e1e; }
        body.light .tile { background: white; }
        .tile img { width: 100%; height: 150px; object-fit: cover; }
        .tile .placeholder { width: 100%; height: 150px; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s, color 0.3s; }
        body.dark .tile .placeholder { background: #333; color: #bbb; }
        body.light .tile .placeholder { background: #ddd; color: #666; }
        .tile .tile-content { padding: 10px; }
        .tile .tile-message { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .tile .tile-scheduled { font-size: 12px; opacity: 0.7; }

        .modal { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; justify-content: center; align-items: center; touch-action: pan-y; transition: background-color 0.3s; }
        body.dark .modal { background-color: rgba(0,0,0,0.9); }
        body.light .modal { background-color: rgba(255,255,255,0.8); }
        .modal-content { margin: auto; padding: 20px; border: none; width: 90%; max-width: 800px; height: 100%; text-align: center; position: relative; touch-action: none; transition: background-color 0.3s, color 0.3s; overflow-y: auto; }
        body.dark .modal-content { background-color: #1e1e1e; color: #ffffff; }
        body.light .modal-content { background-color: #fefefe; color: #000000; }
        .media-wrapper { position: relative; display: inline-block; margin: 0 auto; max-width: 100%; touch-action: none; }
        .modal-img, .modal-video { max-width: 100%; height: auto; display: none; position: relative; z-index: 1; opacity: 1; transition: opacity 0.3s ease; }
        .no-media { margin: 20px 0; font-size: 18px; display: none; }
        body.dark .no-media { color: #bbb; }
        body.light .no-media { color: #666; }
        .modal-message { margin-top: 20px; white-space: pre-wrap; text-align: left; max-height: 200px; overflow-y: auto; }
        .close { font-size: 28px; font-weight: bold; cursor: pointer; position: absolute; top: 15px; right: 15px; z-index: 3; color: #fff; }
        .close:hover, .close:focus { color: #ddd; text-decoration: none; }

        .arrow { position: absolute; top: 50%; transform: translateY(-50%); font-size: 40px; cursor: pointer; background-color: rgba(0,0,0,0.5); padding: 10px; z-index: 10; transition: color 0.3s; }
        body.dark .arrow { color: #fff; }
        body.light .arrow { color: #000; background-color: rgba(255,255,255,0.5); }
        .arrow:hover { background-color: rgba(0,0,0,0.8); }
        body.light .arrow:hover { background-color: rgba(255,255,255,0.8); }
        .prev { left: 10px; }
        .next { right: 10px; }

        .loading-spinner { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border: 4px solid rgba(255,255,255,0.1); border-top-color: #ffffff; border-radius: 50%; animation: spin 1s linear infinite; z-index: 2; }
        body.light .loading-spinner { border: 4px solid rgba(0,0,0,0.1); border-top-color: #000000; }
        @keyframes spin {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }

        #themeToggle { position: fixed; top: 10px; right: 10px; padding: 10px; border: none; border-radius: 5px; cursor: pointer; z-index: 1000; transition: background-color 0.3s, color 0.3s; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
        body.dark #themeToggle { background-color: #333; color: #fff; }
        body.light #themeToggle { background-color: #ddd; color: #000; }
        .theme-icon { width: 24px; height: 24px; fill: currentColor; }

        @media (max-width: 768px) {
            .tile { flex: 0 0 200px; }
            .tile img, .tile .placeholder { height: 120px; }
            .modal-content { width: 95%; padding: 50px 10px 10px 10px; }
            .arrow { display: none !important; }
            .modal-content { overflow-y: auto; text-align: left; }
            .post-item { margin-bottom: 20px; border-bottom: 1px solid #ddd; padding-bottom: 20px; }
            body.dark .post-item { border-bottom: 1px solid #333; }
            .post-media img, .post-media video { max-width: 100%; height: auto; }
            .post-message { white-space: pre-wrap; }
            .close { top: 0; }
        }

        @media (max-width: 480px) {
            .tile { flex: 0 0 150px; }
            .tile img, .tile .placeholder { height: 100px; }
            .tile .tile-message { font-size: 12px; }
            .tile .tile-scheduled { font-size: 10px; }
        }
    </style>
</head>
<body>
    <button id="themeToggle" aria-label="Toggle theme">
        <svg id="sunIcon" class="theme-icon" style="display: none;" viewBox="0 0 24 24">
            <circle cx="12" cy="12" r="5" fill="currentColor"/>
            <line x1="12" y1="6" x2="12" y2="1" stroke="currentColor" stroke-width="2"/>
            <line x1="12" y1="18" x2="12" y2="23" stroke="currentColor" stroke-width="2"/>
            <line x1="6" y1="12" x2="1" y2="12" stroke="currentColor" stroke-width="2"/>
            <line x1="18" y1="12" x2="23" y2="12" stroke="currentColor" stroke-width="2"/>
            <line x1="7.5" y1="7.5" x2="4.3" y2="4.3" stroke="currentColor" stroke-width="2"/>
            <line x1="16.5" y1="7.5" x2="19.7" y2="4.3" stroke="currentColor" stroke-width="2"/>
            <line x1="7.5" y1="16.5" x2="4.3" y2="19.7" stroke="currentColor" stroke-width="2"/>
            <line x1="16.5" y1="16.5" x2="19.7" y2="19.7" stroke="currentColor" stroke-width="2"/>
        </svg>
        <svg id="moonIcon" class="theme-icon" viewBox="0 0 24 24">
            <path d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
        </svg>
    </button>

    <?php foreach ($campaignsData as $campaignId => $campaign): ?>
        <?php $messages = $campaign['messages']; $title = $campaign['title']; ?>
        <?php if ($campaign['error']): ?>
            <p class="error">Error for channel <?php echo htmlspecialchars($campaignId); ?>: <?php echo htmlspecialchars($campaign['error']); ?></p>
        <?php elseif (empty($messages) || !is_array($messages)): ?>
            <p class="error">No messages found for channel <?php echo htmlspecialchars($campaignId); ?> or invalid response format.</p>
        <?php else: ?>
            <h2><?php echo htmlspecialchars($title); ?></h2>
            <div class="tile-row" data-campaign="<?php echo htmlspecialchars($campaignId); ?>" data-page="1" data-has-more="<?php echo count($messages) === 10 ? 'true' : 'false'; ?>" data-loading="false">
                <?php foreach ($messages as $localIndex => $message): ?>
                    <div class="tile" data-index="<?php echo $localIndex; ?>" data-campaign="<?php echo htmlspecialchars($campaignId); ?>">
                        <?php if (!empty($message['media']) && is_array($message['media'])): ?>
                            <img src="<?php echo htmlspecialchars($message['media'][0]['thumbnail'] ?? ''); ?>" alt="Thumbnail">
                        <?php else: ?>
                            <div class="placeholder">No Media</div>
                        <?php endif; ?>
                        <div class="tile-content">
                            <p class="tile-message"><?php echo htmlspecialchars(substr($message['message'] ?? 'N/A', 0, 50)) . '...'; ?></p>
                            <p class="tile-scheduled" data-utc="<?php echo htmlspecialchars($message['scheduled_at'] ?? 'N/A'); ?>">
                                <?php echo htmlspecialchars($message['scheduled_at'] ?? 'N/A'); ?>
                            </p>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php endif; ?>
    <?php endforeach; ?>

    <div id="imageModal" class="modal">
        <div class="modal-content">
            <span class="close">×</span>
            <div id="modalDesktopView" class="media-wrapper">
                <img id="modalImg" class="modal-img" src="" alt="Full Image">
                <video id="modalVideo" class="modal-video" controls></video>
                <span id="prevArrow" class="arrow prev">❮</span>
                <span id="nextArrow" class="arrow next">❯</span>
                <div class="loading-spinner"></div>
            </div>
            <p id="noMedia" class="no-media">No media available</p>
            <p id="modalMessage" class="modal-message"></p>
        </div>
    </div>

    <script>
        // Convert UTC dates to local time zone
        document.querySelectorAll('.tile-scheduled').forEach(elem => {
            const utcDate = elem.dataset.utc;
            if (utcDate && utcDate !== 'N/A') {
                elem.textContent = new Date(utcDate).toLocaleString();
            }
        });

        // Theme toggle logic
        const body = document.body;
        const themeToggle = document.getElementById('themeToggle');
        const sunIcon = document.getElementById('sunIcon');
        const moonIcon = document.getElementById('moonIcon');
        const currentTheme = localStorage.getItem('theme') || 'dark';
        body.classList.add(currentTheme);
        sunIcon.style.display = currentTheme === 'dark' ? 'block' : 'none';
        moonIcon.style.display = currentTheme === 'dark' ? 'none' : 'block';

        themeToggle.addEventListener('click', () => {
            if (body.classList.contains('dark')) {
                body.classList.replace('dark', 'light');
                sunIcon.style.display = 'none';
                moonIcon.style.display = 'block';
                localStorage.setItem('theme', 'light');
            } else {
                body.classList.replace('light', 'dark');
                sunIcon.style.display = 'block';
                moonIcon.style.display = 'none';
                localStorage.setItem('theme', 'dark');
            }
        });

        // Drag scrolling with momentum for tile rows
        const tileRows = document.querySelectorAll('.tile-row');
        tileRows.forEach(tileRow => {
            let isDragging = false;
            let startX, scrollLeft, velocity = 0;
            let prevTime = performance.now();
            let animationFrame;

            function animateScroll() {
                if (Math.abs(velocity) < 0.1) return;
                tileRow.scrollLeft += velocity;
                velocity *= 0.95;
                animationFrame = requestAnimationFrame(animateScroll);
            }

            tileRow.addEventListener('mousedown', e => {
                isDragging = true;
                startX = e.pageX - tileRow.offsetLeft;
                scrollLeft = tileRow.scrollLeft;
                velocity = 0;
                cancelAnimationFrame(animationFrame);
                prevTime = performance.now();
            });

            tileRow.addEventListener('mouseleave', () => {
                if (isDragging) animateScroll();
                isDragging = false;
            });

            tileRow.addEventListener('mouseup', () => {
                if (isDragging) animateScroll();
                isDragging = false;
            });

            tileRow.addEventListener('mousemove', e => {
                if (!isDragging) return;
                e.preventDefault();
                const x = e.pageX - tileRow.offsetLeft;
                const walk = (x - startX) * 2;
                const currentTime = performance.now();
                velocity = (scrollLeft - tileRow.scrollLeft) / (currentTime - prevTime) * 16;
                prevTime = currentTime;
                tileRow.scrollLeft = scrollLeft - walk;
            });

            // Load more on scroll
            tileRow.addEventListener('scroll', () => {
                if (tileRow.scrollLeft + tileRow.clientWidth >= tileRow.scrollWidth - 50 && tileRow.dataset.hasMore === 'true' && tileRow.dataset.loading === 'false') {
                    loadMore(tileRow);
                }
            });
        });

        // Load more messages
        let campaignsSlides = <?php echo json_encode(array_map(function($c) { return $c['messages']; }, $campaignsData)); ?>;
        function loadMore(row) {
            row.dataset.loading = 'true';
            const campaign = row.dataset.campaign;
            const nextPage = parseInt(row.dataset.page) + 1;
            fetch(`<?php echo basename($_SERVER['PHP_SELF']); ?>?ajax=1&campaign=${campaign}&page=${nextPage}`)
                .then(response => response.json())
                .then(newMessages => {
                    if (newMessages.error) {
                        console.error(newMessages.error);
                        return;
                    }
                    if (newMessages.length < 10) {
                        row.dataset.hasMore = 'false';
                    }
                    row.dataset.page = nextPage;

                    const currentLength = campaignsSlides[campaign].length;
                    newMessages.forEach((message, i) => {
                        const tile = document.createElement('div');
                        tile.className = 'tile';
                        tile.dataset.index = currentLength + i;
                        tile.dataset.campaign = campaign;

                        if (message.media && message.media.length > 0) {
                            const img = document.createElement('img');
                            img.src = message.media[0].thumbnail || '';
                            img.alt = 'Thumbnail';
                            tile.appendChild(img);
                        } else {
                            const placeholder = document.createElement('div');
                            placeholder.className = 'placeholder';
                            placeholder.textContent = 'No Media';
                            tile.appendChild(placeholder);
                        }

                        const content = document.createElement('div');
                        content.className = 'tile-content';
                        const messageP = document.createElement('p');
                        messageP.className = 'tile-message';
                        messageP.textContent = (message.message || 'N/A').substring(0, 50) + '...';
                        content.appendChild(messageP);

                        const scheduledP = document.createElement('p');
                        scheduledP.className = 'tile-scheduled';
                        scheduledP.dataset.utc = message.scheduled_at || 'N/A';
                        scheduledP.textContent = message.scheduled_at || 'N/A';
                        if (scheduledP.dataset.utc && scheduledP.dataset.utc !== 'N/A') {
                            scheduledP.textContent = new Date(scheduledP.dataset.utc).toLocaleString();
                        }
                        content.appendChild(scheduledP);

                        tile.appendChild(content);
                        row.appendChild(tile);

                        tile.addEventListener('click', () => {
                            currentIndex = parseInt(tile.dataset.index);
                            allSlides = campaignsSlides[tile.dataset.campaign];
                            modal.style.display = 'flex';
                            themeToggle.style.display = 'none';
                            mediaWrapper.style.display = 'inline-block';
                            modalMessage.style.display = 'block';
                            noMediaElem.style.display = 'block';
                            showSlide(currentIndex);
                            updateArrows();
                        });
                    });

                    campaignsSlides[campaign] = campaignsSlides[campaign].concat(newMessages);
                })
                .catch(error => console.error('Error loading more:', error))
                .finally(() => {
                    row.dataset.loading = 'false';
                });
        }

        // Modal handling
        const modal = document.getElementById('imageModal');
        const modalImg = document.getElementById('modalImg');
        const modalVideo = document.getElementById('modalVideo');
        const noMediaElem = document.getElementById('noMedia');
        const modalMessage = document.getElementById('modalMessage');
        const closeBtn = document.getElementsByClassName('close')[0];
        const prevArrow = document.getElementById('prevArrow');
        const nextArrow = document.getElementById('nextArrow');
        const mediaWrapper = document.getElementById('modalDesktopView');
        const loadingSpinner = document.querySelector('.loading-spinner');

        let allSlides = [];
        let currentIndex = 0;
        let touchStartX = 0;
        let touchEndX = 0;

        function showSlide(index) {
            const currentMedia = modalImg.style.display === 'block' ? modalImg : (modalVideo.style.display === 'block' ? modalVideo : null);
            if (currentMedia) {
                currentMedia.style.opacity = '0';
            }

            setTimeout(() => {
                currentIndex = (index + allSlides.length) % allSlides.length;
                const slide = allSlides[currentIndex];
                const postUrl = window.location.origin + window.location.pathname + '?post=' + slide.slug;
                modalMessage.innerHTML = '<a href="' + postUrl + '" style="text-decoration: none; color: inherit;">' + (slide.message || 'N/A') + '</a>';

                modalImg.style.display = 'none';
                modalVideo.style.display = 'none';
                noMediaElem.style.display = 'none';
                loadingSpinner.style.display = 'none';
                modalVideo.pause();

                if (slide.media && slide.media.length > 0) {
                    mediaWrapper.style.display = 'inline-block';
                    const mediaItem = slide.media[0];
                    loadingSpinner.style.display = 'block';
                    let mediaElement;
                    if (mediaItem.mime_type.startsWith('video/')) {
                        mediaElement = modalVideo;
                        mediaElement.src = mediaItem.location;
                        mediaElement.addEventListener('loadeddata', () => {
                            loadingSpinner.style.display = 'none';
                            mediaElement.style.display = 'block';
                            mediaElement.style.opacity = '0';
                            setTimeout(() => { mediaElement.style.opacity = '1'; }, 10);
                        }, {once: true});
                    } else {
                        mediaElement = modalImg;
                        mediaElement.src = mediaItem.location;
                        mediaElement.addEventListener('load', () => {
                            loadingSpinner.style.display = 'none';
                            mediaElement.style.display = 'block';
                            mediaElement.style.opacity = '0';
                            setTimeout(() => { mediaElement.style.opacity = '1'; }, 10);
                        }, {once: true});
                    }
                } else {
                    noMediaElem.style.display = 'block';
                }
            }, 300);
        }

        function updateArrows() {
            if (allSlides.length > 1) {
                prevArrow.style.display = 'block';
                nextArrow.style.display = 'block';
            } else {
                prevArrow.style.display = 'none';
                nextArrow.style.display = 'none';
            }
        }

        document.querySelectorAll('.tile').forEach(tile => {
            tile.addEventListener('click', () => {
                currentIndex = parseInt(tile.dataset.index);
                allSlides = campaignsSlides[tile.dataset.campaign];
                modal.style.display = 'flex';
                themeToggle.style.display = 'none';
                mediaWrapper.style.display = 'inline-block';
                modalMessage.style.display = 'block';
                noMediaElem.style.display = 'block';
                showSlide(currentIndex);
                updateArrows();
            });
        });

        prevArrow.addEventListener('click', () => showSlide(currentIndex - 1));
        nextArrow.addEventListener('click', () => showSlide(currentIndex + 1));

        modal.addEventListener('touchstart', e => {
            touchStartX = e.changedTouches[0].screenX;
        });

        modal.addEventListener('touchend', e => {
            touchEndX = e.changedTouches[0].screenX;
            if (touchStartX - touchEndX > 50) {
                showSlide(currentIndex + 1);
            } else if (touchEndX - touchStartX > 50) {
                showSlide(currentIndex - 1);
            }
        });

        closeBtn.addEventListener('click', () => {
            modal.style.display = 'none';
            themeToggle.style.display = 'block';
            modalVideo.pause();
        });

        window.addEventListener('click', event => {
            if (event.target === modal) {
                modal.style.display = 'none';
                themeToggle.style.display = 'block';
                modalVideo.pause();
            }
        });
    </script>
</body>
</html>

Example 3: Multi-Channel eLearning Course Feed (elearningapp.php)

Full Functionality Explanation

This demo implements an eLearning-style interface with a collapsible sidebar for navigating multiple campaigns. Campaign is Intensify Digital's system term for a structured content feed, but it can also be used synonymously with course, chapter, or exercises. It fetches messages via cURL, decodes JSON, sorts by date, and generates slugs, with robust error handling for HTTP status codes (e.g., non-200 responses) and JSON errors, storing errors in the campaignsData array for display. The single post view mirrors the others. The main view features a fixed sidebar with accordions (<details> elements) for each campaign, listing messages with thumbnails or placeholders and clickable titles. Clicking a sidebar item loads the message in a central pane with full media (image or video), fade transitions, a loading spinner, a message linked to the single post view, and navigation arrows/swipes. The script persists the last viewed campaign and message index in localStorage, automatically loading them on page load for continuity. The sidebar can be toggled to collapse, expanding the main content area to full-screen, especially useful on mobile devices, with a toggle button that adjusts position based on screen size (150px for <480px, 200px for <768px, 250px otherwise). Navigation arrows in the main pane fade out after 2 seconds of inactivity on desktop but reappear on mouse movement. Touch swipes are supported for navigation. The theme toggle persists dark/light modes. The layout is responsive, adjusting sidebar width and tile sizes for smaller screens. Errors are displayed if the API response is invalid or empty.

Download Code

Intensify Digital API Documentation

API Overview

Curl Command Example

Example Use Cases

Example 1: Single Social Media Style Feed (socialapp.php)

Full Functionality Explanation

Demo Preview

socialapp.php Code

Example 2: Multi-Channel Streaming TV Feed (streamingtv.php)

Full Functionality Explanation

Demo Preview

streamingtv.php Code

Example 3: Multi-Channel eLearning Course Feed (elearningapp.php)

Full Functionality Explanation

Demo Preview

elearningapp.php Code