Exemplo Completo com Configuração Global
Exemplo completo usando configuração global:<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Exemplo - Widgets Martan</title>
</head>
<body>
<!-- Configuração global via JavaScript -->
<script>
window.MartanConfig = window.MartanConfig || {}
window.MartanConfig.init({
storeId: 'STORE_ID_DA_LOJA',
storeKey: 'STORE_KEY_TIPO_REVIEWS'
})
</script>
<!-- Carregar os widgets -->
<script type="module" src="https://cdn.martan.app/widgets.js"></script>
<!-- Usar os widgets sem repetir store-id e store-key -->
<h2>Rating do Produto</h2>
<martan-rating data-product-sku="PROD-123"></martan-rating>
<h2>Avaliações do Produto</h2>
<martan-reviews
data-product-sku="PROD-123"
data-header-type="default"
data-list-type="grid">
</martan-reviews>
<h2>Perguntas e Respostas</h2>
<martan-questions
data-product-sku="PROD-123"
data-enable-new-questions="true">
</martan-questions>
</body>
</html>
Alternativa com Data Attributes
<body
data-martan-store-id="STORE_ID_DA_LOJA"
data-martan-store-key="STORE_KEY_TIPO_REVIEWS">
<script type="module" src="https://cdn.martan.app/widgets.js"></script>
<!-- Widgets aqui -->
<martan-rating data-product-sku="PROD-123"></martan-rating>
<martan-reviews data-product-sku="PROD-123"></martan-reviews>
<martan-questions data-product-sku="PROD-123"></martan-questions>
</body>
Exemplo com Customização CSS
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Widgets Customizados</title>
<style>
martan-reviews {
--rw-primary-color: #10b981;
--rw-star-color: #f59e0b;
--rw-progress-bar-color: #f59e0b;
--rw-bg-color: #ffffff;
--rw-text-color: #1f2937;
--rw-font-family: 'Inter', sans-serif;
}
martan-rating {
--rw-star-color: #f59e0b;
--rw-text-color: #1f2937;
--rw-text-secondary: #6b7280;
}
</style>
</head>
<body>
<script>
window.MartanConfig = window.MartanConfig || {}
window.MartanConfig.init({
storeId: 'STORE_ID_DA_LOJA',
storeKey: 'STORE_KEY_TIPO_REVIEWS'
})
</script>
<script type="module" src="https://cdn.martan.app/widgets.js"></script>
<martan-rating
data-product-sku="PROD-123"
data-star-color="#10b981"
data-theme="compact">
</martan-rating>
<martan-reviews
data-product-sku="PROD-123"
data-header-type="histogram"
data-list-type="list">
</martan-reviews>
</body>
</html>
Exemplo com Auto-Discovery (Rating)
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Auto-Discovery Rating</title>
</head>
<body>
<!-- Elementos com classes específicas -->
<div class="product-card">
<h3>Produto 1</h3>
<div class="product-card__rating" data-sku="PROD-123"></div>
</div>
<div class="product-card">
<h3>Produto 2</h3>
<div class="product-card__rating" data-sku="PROD-456"></div>
</div>
<script type="module" src="https://cdn.martan.app/widgets.js"></script>
<script>
// Inicializar auto-discovery após o módulo carregar
window.addEventListener('DOMContentLoaded', () => {
window.MartanRating.init({
store_id: 'STORE_ID_DA_LOJA',
web_id: 'STORE_KEY_TIPO_REVIEWS',
widget_rating: {
star_color: '#fbbf24',
theme: 'compact',
custom_class: '.product-card__rating'
}
});
});
</script>
</body>
</html>