WordPress drop-in block

Paste the snippet below into a WP Bakery Raw HTML block on your campus tour page. It loads live from your backend, so any changes you make in the admin appear on the WP page automatically — no re-paste needed.
https://example.lovable.app/api/public/tour Test API
<link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;600;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pannellum/2.5.6/pannellum.css">

<style>
.page-heading,.top-sidebar,.breadcrumbs,.cactus-breadcrumb,#slider{display:none!important}
:root{--umo-green:#005f3e;--umo-gold:#fec057}
@keyframes panoFadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.pano-root *{animation:none!important;transition:none!important}}
.pano-root{all:initial!important;display:block!important;font-family:'Jost',sans-serif!important;font-size:16px!important;background:transparent!important;padding:48px 20px 100px!important;max-width:1200px!important;margin:0 auto!important;line-height:1.6!important;overflow-x:hidden!important}
.pano-root *{box-sizing:border-box!important}
.pano-header{text-align:left!important;margin-bottom:24px!important}
.pano-eyebrow{font-size:11px!important;font-weight:700!important;letter-spacing:.22em!important;text-transform:uppercase!important;color:#fff!important;background:var(--umo-green)!important;display:inline-block!important;padding:4px 14px!important;border-radius:50px!important;margin-bottom:12px!important}
.pano-root h1{font-size:clamp(35px,6vw,61px)!important;font-weight:900!important;color:var(--umo-green)!important;text-transform:uppercase!important;letter-spacing:-2px!important;margin:0!important;line-height:1.05!important;display:block!important;text-align:left!important}
.pano-lead{margin-bottom:32px!important}
.pano-root .pano-lead h2{font-size:clamp(20px,2.4vw,26px)!important;font-weight:900!important;color:var(--umo-green)!important;text-transform:uppercase!important;letter-spacing:-0.2px!important;margin:0 0 14px!important;padding-bottom:12px!important;border-bottom:3px solid var(--umo-gold)!important;display:block!important;text-align:left!important}
.pano-lead p{font-size:15px!important;color:#444!important;line-height:1.75!important;margin:0!important;display:block!important}
.pano-filters{display:flex!important;flex-wrap:wrap!important;gap:10px!important;margin:0 0 28px!important}
.pano-filter{all:initial!important;font-family:'Jost',sans-serif!important;cursor:pointer!important;display:inline-flex!important;align-items:center!important;background:rgba(0,95,62,.07)!important;border-radius:999px!important;padding:9px 18px!important;font-size:12.5px!important;color:var(--umo-green)!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.06em!important;transition:all .2s!important;border:1.5px solid transparent!important;box-sizing:border-box!important}
.pano-filter:hover{background:rgba(0,95,62,.14)!important}
.pano-filter.is-active{background:var(--umo-green)!important;color:#fff!important}
.pano-filter:focus-visible{outline:3px solid var(--umo-gold)!important;outline-offset:3px!important}
.pano-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))!important;gap:18px!important}
.pano-card{all:initial!important;font-family:'Jost',sans-serif!important;cursor:pointer!important;position:relative!important;display:block!important;width:100%!important;min-width:0!important;aspect-ratio:4/3!important;border-radius:16px!important;overflow:hidden!important;border:1.5px solid #eaeaea!important;background:var(--umo-green)!important;box-shadow:0 4px 16px rgba(0,0,0,.06)!important;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease!important;box-sizing:border-box!important;text-align:left!important;animation:panoFadeUp .5s ease both!important}
.pano-card:hover{transform:translateY(-5px)!important;border-color:var(--umo-gold)!important;box-shadow:0 16px 40px rgba(0,95,62,.16)!important}
.pano-card:focus-visible{outline:3px solid var(--umo-gold)!important;outline-offset:3px!important}
.pano-card-img{position:absolute!important;inset:0!important;background-size:cover!important;background-position:center!important;background-color:var(--umo-green)!important;transition:transform .5s ease!important}
.pano-card:hover .pano-card-img{transform:scale(1.06)!important}
.pano-card-img.is-placeholder{background-image:radial-gradient(circle at 30% 25%,rgba(254,192,87,.22),transparent 55%),linear-gradient(135deg,#00744c 0%,#004e33 100%)!important}
.pano-card-img.is-placeholder::after{content:'\f030'!important;font-family:'FontAwesome'!important;position:absolute!important;top:50%!important;left:50%!important;transform:translate(-50%,-60%)!important;font-size:46px!important;color:rgba(255,255,255,.28)!important}
.pano-card-scrim{position:absolute!important;inset:0!important;background:linear-gradient(to top,rgba(0,40,26,.85) 0%,rgba(0,40,26,.35) 35%,transparent 65%)!important}
.pano-card-meta{position:absolute!important;left:0!important;right:0!important;bottom:0!important;padding:18px 20px!important;display:block!important}
.pano-card-cat{font-size:10px!important;font-weight:800!important;letter-spacing:.16em!important;text-transform:uppercase!important;color:var(--umo-gold)!important;display:block!important;margin-bottom:5px!important}
.pano-card-title{font-size:18px!important;font-weight:900!important;color:#fff!important;line-height:1.2!important;letter-spacing:-.4px!important;display:block!important}
.pano-badge{position:absolute!important;top:14px!important;right:14px!important;display:inline-flex!important;align-items:center!important;gap:6px!important;background:rgba(255,255,255,.16)!important;backdrop-filter:blur(8px)!important;-webkit-backdrop-filter:blur(8px)!important;border:1px solid rgba(255,255,255,.4)!important;border-radius:999px!important;padding:5px 11px!important;font-size:10px!important;font-weight:800!important;letter-spacing:.1em!important;color:#fff!important;text-transform:uppercase!important}
.pano-badge i{font-size:11px!important}
.pano-modal{position:fixed!important;inset:0!important;z-index:999999!important;display:none!important;background:rgba(0,30,20,.94)!important;backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important;flex-direction:column!important;padding:0!important}
.pano-modal.is-open{display:flex!important;animation:panoFadeUp .25s ease both!important}
.pano-modal-bar{flex-shrink:0!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;padding:18px 24px!important;background:var(--umo-green)!important}
.pano-modal-titles{display:block!important;min-width:0!important}
.pano-modal-cat{font-size:10px!important;font-weight:800!important;letter-spacing:.18em!important;text-transform:uppercase!important;color:var(--umo-gold)!important;display:block!important;margin-bottom:3px!important}
.pano-root .pano-modal h2{font-size:clamp(18px,3vw,26px)!important;font-weight:900!important;color:#fff!important;text-transform:uppercase!important;letter-spacing:-.5px!important;margin:0!important;line-height:1.15!important;display:block!important;text-align:left!important}
.pano-modal-desc{font-size:13px!important;color:rgba(255,255,255,.75)!important;margin:5px 0 0!important;display:block!important;line-height:1.5!important}
.pano-close{all:initial!important;font-family:'Jost',sans-serif!important;cursor:pointer!important;flex-shrink:0!important;display:inline-flex!important;align-items:center!important;gap:8px!important;background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.4)!important;border-radius:999px!important;padding:10px 18px!important;font-size:12px!important;font-weight:800!important;letter-spacing:.08em!important;text-transform:uppercase!important;color:#fff!important;transition:background .2s!important;box-sizing:border-box!important}
.pano-close:hover{background:rgba(255,255,255,.26)!important}
.pano-close:focus-visible{outline:3px solid #fff!important;outline-offset:3px!important}
.pano-stage{flex:1!important;width:100%!important;min-height:0!important;position:relative!important;background:#001e14!important}
.pano-hint{flex-shrink:0!important;text-align:center!important;padding:12px 20px!important;font-size:11.5px!important;font-weight:600!important;letter-spacing:.05em!important;color:rgba(255,255,255,.6)!important;background:#001e14!important;text-transform:uppercase!important}
.pano-stage .pnlm-container{font-family:'Jost',sans-serif!important}
.pano-cta{background:var(--umo-green)!important;border-radius:36px!important;padding:64px 50px!important;text-align:center!important;box-shadow:0 25px 60px rgba(0,95,62,.2)!important;display:block!important;margin-top:60px!important}
.pano-cta-label{font-size:11px!important;font-weight:700!important;letter-spacing:.22em!important;text-transform:uppercase!important;color:#fff!important;background:rgba(255,255,255,.15)!important;border:1px solid rgba(255,255,255,.35)!important;display:inline-block!important;padding:4px 14px!important;border-radius:50px!important;margin-bottom:12px!important}
.pano-root .pano-cta h2{color:#fff!important;font-size:clamp(26px,3.5vw,38px)!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:-1px!important;margin:0 0 10px!important;display:block!important;text-align:center!important}
.pano-cta p{color:rgba(255,255,255,.75)!important;font-size:15px!important;max-width:540px!important;margin:0 auto 32px!important;display:block!important}
.pano-cta-btns{display:flex!important;gap:14px!important;justify-content:center!important;flex-wrap:wrap!important}
.pano-btn-gold{display:inline-block!important;background:var(--umo-gold)!important;color:var(--umo-green)!important;padding:16px 40px!important;border-radius:50px!important;font-weight:800!important;text-decoration:none!important;font-size:13px!important;text-transform:uppercase!important;letter-spacing:.07em!important;transition:.3s!important;box-shadow:0 8px 20px rgba(0,0,0,.15)!important;font-family:'Jost',sans-serif!important}
.pano-btn-gold:hover{background:#fff!important;color:var(--umo-green)!important;transform:scale(1.04)!important}
.pano-btn-gold:focus-visible{outline:3px solid #fff!important;outline-offset:4px!important}
.pano-btn-ghost{display:inline-block!important;border:2px solid rgba(255,255,255,.45)!important;color:#fff!important;padding:15px 36px!important;border-radius:50px!important;font-weight:800!important;text-decoration:none!important;font-size:13px!important;text-transform:uppercase!important;letter-spacing:.07em!important;transition:.3s!important;font-family:'Jost',sans-serif!important}
.pano-btn-ghost:hover{border-color:#fff!important;background:rgba(255,255,255,.1)!important}
.pano-btn-ghost:focus-visible{outline:3px solid #fff!important;outline-offset:4px!important}
.pano-empty{padding:60px 20px!important;text-align:center!important;color:#777!important;font-size:14px!important}
@media(max-width:600px){.pano-grid{grid-template-columns:1fr 1fr!important;gap:12px!important}.pano-card-title{font-size:15px!important}.pano-modal-bar{padding:14px 16px!important}.pano-close span{display:none!important}.pano-close{padding:10px 12px!important}.pano-cta{padding:48px 24px!important;border-radius:24px!important}}
@media(max-width:380px){.pano-grid{grid-template-columns:1fr!important}}
</style>

<div class="pano-root">
  <header class="pano-header">
    <span class="pano-eyebrow">Visit Campus</span>
    <h1>Explore UMO in 360&deg;</h1>
  </header>
  <div class="pano-lead">
    <h2>Step Onto Campus From Anywhere</h2>
    <p>Take an immersive, interactive tour of the University of Mount Olive. Tap any location below to look around in every direction &mdash; drag to pan, scroll or pinch to zoom, click hotspots to jump to nearby locations, and go fullscreen for the full experience. No headset required.</p>
  </div>
  <div class="pano-filters" id="pano-filters" role="group" aria-label="Filter locations by type"></div>
  <div class="pano-grid" id="pano-grid"><div class="pano-empty">Loading 360&deg; tour&hellip;</div></div>
  <div class="pano-modal" id="pano-modal" role="dialog" aria-modal="true" aria-labelledby="pano-modal-title">
    <div class="pano-modal-bar">
      <div class="pano-modal-titles">
        <span class="pano-modal-cat" id="pano-modal-cat"></span>
        <h2 id="pano-modal-title">Location</h2>
        <p class="pano-modal-desc" id="pano-modal-desc"></p>
      </div>
      <button class="pano-close" id="pano-close" type="button" aria-label="Close 360 viewer">
        <i class="fa fa-times" aria-hidden="true"></i><span>Close</span>
      </button>
    </div>
    <div class="pano-stage" id="pano-stage"></div>
    <div class="pano-hint">Drag to look around &nbsp;&middot;&nbsp; Scroll or pinch to zoom &nbsp;&middot;&nbsp; Click hotspots to jump &nbsp;&middot;&nbsp; Press Esc to close</div>
  </div>
  <section class="pano-cta" aria-label="Call to action">
    <span class="pano-cta-label">See It In Person</span>
    <h2 style="text-align:center!important">There&rsquo;s Nothing Like Being Here</h2>
    <p>A 360&deg; tour is a great start &mdash; but the best way to know if UMO is right for you is to walk the campus yourself. Schedule your visit today.</p>
    <div class="pano-cta-btns">
      <a href="https://umo.edu/visit/" class="pano-btn-gold">Schedule a Visit</a>
      <a href="https://apply.umo.edu/apply/" class="pano-btn-ghost" target="_blank" rel="noopener">Apply Now</a>
    </div>
  </section>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pannellum/2.5.6/pannellum.js"></script>
<script>
(function(){
  var API_URL = "https://example.lovable.app/api/public/tour";
  var reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  var grid = document.getElementById('pano-grid');
  var filters = document.getElementById('pano-filters');
  var modal = document.getElementById('pano-modal');
  var stage = document.getElementById('pano-stage');
  var closeBtn = document.getElementById('pano-close');
  var mTitle = document.getElementById('pano-modal-title');
  var mCat = document.getElementById('pano-modal-cat');
  var mDesc = document.getElementById('pano-modal-desc');
  var TOUR = { locations: [], hotspots: [], categories: [] };
  var byId = {};
  var viewer = null;
  var lastFocused = null;

  function esc(s){ return String(s==null?'':s).replace(/[&<>"]/g,function(c){return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c];}); }

  fetch(API_URL, {cache:'no-store'}).then(function(r){return r.json();}).then(function(d){
    TOUR = d || TOUR;
    byId = {};
    (TOUR.locations||[]).forEach(function(l){ byId[l.id] = l; });
    buildFilters();
    buildCards('__all');
  }).catch(function(){
    grid.innerHTML = '<div class="pano-empty">Could not load the 360&deg; tour. Please try again later.</div>';
  });

  function buildCards(activeCat){
    var locs = (TOUR.locations||[]).filter(function(l){
      return !activeCat || activeCat === '__all' || l.category_name === activeCat;
    });
    if(locs.length === 0){
      grid.innerHTML = '<div class="pano-empty">No locations yet.</div>';
      return;
    }
    grid.innerHTML = '';
    locs.forEach(function(loc, i){
      var card = document.createElement('button');
      card.type = 'button';
      card.className = 'pano-card';
      card.style.animationDelay = (i * 0.04) + 's';
      card.setAttribute('aria-label', 'Open 360 degree view of ' + (loc.title || 'location'));
      var imgLayer = loc.thumb_url
        ? '<span class="pano-card-img" style="background-image:url(\'' + esc(loc.thumb_url) + '\')"></span>'
        : '<span class="pano-card-img is-placeholder"></span>';
      card.innerHTML = imgLayer +
        '<span class="pano-card-scrim"></span>' +
        '<span class="pano-badge"><i class="fa fa-photo" aria-hidden="true"></i>360&deg;</span>' +
        '<span class="pano-card-meta">' +
          (loc.category_name ? '<span class="pano-card-cat">' + esc(loc.category_name) + '</span>' : '') +
          '<span class="pano-card-title">' + esc(loc.title) + '</span>' +
        '</span>';
      card.addEventListener('click', function(){ openPano(loc.id, card); });
      grid.appendChild(card);
    });
  }

  function buildFilters(){
    var cats = [];
    (TOUR.locations||[]).forEach(function(l){
      if(l.category_name && cats.indexOf(l.category_name) === -1) cats.push(l.category_name);
    });
    if(cats.length < 2){ filters.style.display = 'none'; return; }
    filters.innerHTML = '';
    var all = ['__all'].concat(cats);
    all.forEach(function(cat){
      var pill = document.createElement('button');
      pill.type = 'button';
      pill.className = 'pano-filter' + (cat === '__all' ? ' is-active' : '');
      pill.textContent = (cat === '__all') ? 'All' : cat;
      pill.setAttribute('aria-pressed', cat === '__all' ? 'true' : 'false');
      pill.addEventListener('click', function(){
        filters.querySelectorAll('.pano-filter').forEach(function(p){
          p.classList.remove('is-active'); p.setAttribute('aria-pressed','false');
        });
        pill.classList.add('is-active'); pill.setAttribute('aria-pressed','true');
        buildCards(cat);
      });
      filters.appendChild(pill);
    });
  }

  function hotspotsFor(locId){
    return (TOUR.hotspots||[]).filter(function(h){ return h.location_id === locId; }).map(function(h){
      if(h.type === 'scene' && h.target_location_id && byId[h.target_location_id]){
        var target = byId[h.target_location_id];
        return {
          pitch: h.pitch, yaw: h.yaw, type: 'scene',
          text: h.text || ('Go to ' + target.title),
          sceneId: target.id
        };
      }
      return { pitch: h.pitch, yaw: h.yaw, type: 'info', text: h.text || '' };
    });
  }

  function buildScenes(){
    var scenes = {};
    (TOUR.locations||[]).forEach(function(loc){
      scenes[loc.id] = {
        type: 'equirectangular',
        panorama: loc.image_url,
        title: '',
        autoLoad: true,
        hotSpots: hotspotsFor(loc.id)
      };
    });
    return scenes;
  }

  function setHeader(loc){
    mTitle.textContent = loc.title || 'Location';
    mCat.textContent = loc.category_name || '';
    mCat.style.display = loc.category_name ? 'block' : 'none';
    mDesc.textContent = loc.description || '';
    mDesc.style.display = loc.description ? 'block' : 'none';
  }

  function openPano(locId, triggerEl){
    var loc = byId[locId];
    if(!loc) return;
    lastFocused = triggerEl || document.activeElement;
    setHeader(loc);
    modal.classList.add('is-open');
    document.documentElement.style.overflow = 'hidden';
    if(typeof pannellum === 'undefined'){
      stage.innerHTML = '<div style="color:#fff;font-family:Jost,sans-serif;padding:40px;text-align:center;line-height:1.6">The 360&deg; viewer could not load. Please check your connection and try again.</div>';
    } else {
      stage.innerHTML = '';
      viewer = pannellum.viewer('pano-stage', {
        default: {
          firstScene: locId,
          autoLoad: true,
          autoRotate: reduceMotion ? 0 : -2,
          autoRotateInactivityDelay: 3000,
          sceneFadeDuration: 600,
          showZoomCtrl: true,
          showFullscreenCtrl: true,
          keyboardZoom: true,
          mouseZoom: true,
          hfov: 100,
          compass: false
        },
        scenes: buildScenes()
      });
      try {
        viewer.on('scenechange', function(newId){
          var l = byId[newId];
          if(l) setHeader(l);
        });
      } catch(e){}
    }
    closeBtn.focus();
    document.addEventListener('keydown', onKeydown, true);
  }

  function closePano(){
    if(viewer){ try{ viewer.destroy(); }catch(e){} viewer = null; }
    stage.innerHTML = '';
    modal.classList.remove('is-open');
    document.documentElement.style.overflow = '';
    document.removeEventListener('keydown', onKeydown, true);
    if(lastFocused && lastFocused.focus){ lastFocused.focus(); }
  }

  function onKeydown(e){
    if(e.key === 'Escape'){ e.preventDefault(); closePano(); }
  }
  closeBtn.addEventListener('click', closePano);
  modal.addEventListener('click', function(e){ if(e.target === modal) closePano(); });
})();
</script>
Live preview

This is exactly what visitors will see on the WordPress page once the snippet above is pasted in.
Visit Campus
Campus 360° Tour

WordPress drop-in block

Live preview

Explore UMO in 360°
