Skip to main content

​
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>