Demo en vivo · Prisa

Cómo mostrar el shoppable
dentro de la nota real

Ojo: no vas a subir nada a ningún lado, ni se modifica la página de Caracol. Solo guardas un botón en tu navegador. Cuando estés en la nota y le des clic, el video aparece en tu pantalla (y se va al recargar). Es para enseñarlo en la reunión.

⚠️ Lo más importante: el favorito se usa estando en la nota de Caracol, no en esta página. Aquí solo lo guardas.

prisa-shoppable.pages.dev/i

🎬 Shoppable en la nota

Arrástralo con el mouse hacia arriba, a la barra de favoritos ⬆️

Arrastra el botón a la barra

GmailYouTube↖ suéltalo aquí

🎬 Shoppable en la nota

↑

Clic sostenido sobre el botón morado y lo llevas a la barra de favoritos. Si no ves esa barra: ⌘ + ⇧ + B

Queda guardado ahí

GmailYouTube🎬 Shoppable en la nota

Listo, ya te quedó como un favorito más. Esto se hace una sola vez.

Abre la nota y dale clic

GmailYouTube🎬 Shoppable en la nota 👆

▶ video de la nota

Estando en la nota de Caracol, clic al favorito. Sale un menú para elegir el formato.

Aparece tu video shoppable

GmailYouTube🎬 Shoppable en la nota

🛍️ VIDEO SHOPPABLE

Queda en el mismo espacio del video, y se puede tocar en vivo (probador, compra…).

¿Se te desordenó algo? Recarga la página (⌘ + R) y todo vuelve a la normalidad. Nada quedó cambiado.

Plan B: si el marcador no funciona

Algunos sitios bloquean los marcadores. En ese caso abre la consola (⌘ + ⌥ + J), pega esto y Enter:

(function(){var B='https://shoppable-studio.pages.dev/player.html?id=';var D=[['palette','Palette · probador de tono'],['balenciaga','Balenciaga · probador AR'],['claro','Claro · multi-producto'],['alpura','Alpura · social 6s'],['audi','Audi · FOOH / test drive'],['galaxya54','Galaxy A54 · compra'],['arrozleche','Receta comprable']];if(/prisa-shoppable\.pages\.dev/.test(location.host)){alert('👋 Estás en la página de instrucciones.\n\nEste botón se usa ESTANDO en la nota de Caracol.\n\n1) Abre caracol.com.co y entra a una nota\n2) Ahí dale clic a este mismo favorito');return}function inject(id){var mode='replace';var t=document.querySelector('iframe[src*="youtube.com/embed"],iframe[src*="youtube-nocookie"]');if(!t){var v=document.querySelector('.video-js');if(v&&v.getBoundingClientRect().width>200)t=v}if(!t)t=document.querySelector('.lead-art');if(!t){var art=document.querySelector('article,[class*="article-body"],[class*="cuerpo"],main');var ps=art?art.querySelectorAll('p'):[];if(ps.length>1){t=ps[1];mode='after'}}if(!t){alert('No encontré dónde ponerlo en '+location.hostname+'.\n\nAbre una NOTA del portal y vuelve a darle clic.');return}var ref=mode==='replace'?t:t.parentNode;var w=Math.round((mode==='replace'?t:ref).getBoundingClientRect().width)||640;var d=document.createElement('div');d.style.cssText='position:relative;width:100%;max-width:'+w+'px;margin:18px auto';d.innerHTML='<div style="font:800 11px/1.2 system-ui;letter-spacing:.8px;text-transform:uppercase;color:#6d28d9;margin-bottom:8px"><span style="background:#6d28d9;color:#fff;padding:2px 7px;border-radius:5px">Publicidad</span> Video in-article · formato shoppable</div><div style="position:relative;width:100%;aspect-ratio:16/9;border-radius:6px;overflow:hidden;box-shadow:0 0 0 3px rgba(109,40,217,.25)"><iframe src="'+B+id+'" allow="autoplay" style="position:absolute;inset:0;width:100%;height:100%;border:0"></iframe></div>';if(mode==='replace'){t.parentNode.replaceChild(d,t)}else{t.parentNode.insertBefore(d,t.nextSibling)}d.scrollIntoView({block:'center',behavior:'smooth'})}var o=document.createElement('div');o.style.cssText='position:fixed;inset:0;background:rgba(10,10,15,.6);z-index:2147483647;display:flex;align-items:center;justify-content:center';var c='<div style="background:#fff;border-radius:14px;padding:18px;max-width:350px;width:90%;font-family:system-ui"><div style="font:800 15px system-ui;margin-bottom:3px">Inyectar video shoppable</div><div style="font:400 12px system-ui;color:#666;margin-bottom:13px">Elige el formato para el slot de video</div>';D.forEach(function(x){c+='<button data-id="'+x[0]+'" style="display:block;width:100%;text-align:left;margin-bottom:7px;padding:11px 12px;border:1px solid #e3e5ea;border-radius:9px;background:#fff;cursor:pointer;font:600 13px system-ui">'+x[1]+'</button>'});c+='<button data-x="1" style="width:100%;padding:9px;border:0;background:#f1f2f5;border-radius:9px;cursor:pointer;font:600 12px system-ui;margin-top:4px">Cancelar</button></div>';o.innerHTML=c;o.addEventListener('click',function(e){var b=e.target.closest('button');if(!b){if(e.target===o)o.remove();return}if(b.dataset.x){o.remove();return}o.remove();inject(b.dataset.id)});document.body.appendChild(o)})();

Cómo mostrar el shoppabledentro de la nota real

Plan B: si el marcador no funciona

Cómo mostrar el shoppable
dentro de la nota real