Documentação · Guias
Widget para lojas online
Um cartão com os dados públicos escolhidos por si e um link para o passaporte completo. Monta-se pela sua referência: a loja não guarda nada do Urdume.
1. Colar o código
Na página do produto
<div data-urdume-empresa="a-sua-marca" data-urdume-referencia="TS-100">
<a href="https://urdume.site/r/a-sua-marca/TS-100">Passaporte digital do produto</a>
</div>
<script src="https://urdume.site/assets/js/urdume-widget.js" async></script>Troque "a-sua-marca" pelo seu identificador (Programadores › Widget para lojas mostra o código já preenchido) e TS-100 pela referência do produto. Sem JavaScript, fica o link.
2. Opções
| Atributo | Efeito |
|---|---|
data-urdume-serie |
Mostra o passaporte de uma peça (número de série). |
data-urdume-tema |
"claro" ou "escuro". Por omissão, segue o tema do visitante. |
data-urdume-teste |
Usa os dados de teste. |
data-urdume-titulo |
Título do iframe para leitores de ecrã (por omissão "Passaporte digital do produto"). |
Em Programadores › Widget para lojas escolhe os campos (até 8, só públicos) e, se quiser, os domínios onde o widget pode aparecer. As cores, letras e logótipo vêm de Definições › Marca.
3. Páginas dinâmicas
Montar de novo depois de mudar o HTML
// Página que troca de variante sem recarregar (ex.: escolher o tamanho):
const holder = document.querySelector('#passaporte');
holder.innerHTML = `<div data-urdume-empresa="a-sua-marca" data-urdume-referencia="${referencia}"></div>`;
window.UrdumeWidget && window.UrdumeWidget.mount(holder);Se a sua loja tiver Content-Security-Policy
Acrescente o endereço do Urdume a script-src (para o urdume-widget.js) e a frame-src (para o cartão): https://urdume.site/