> ## Documentation Index
> Fetch the complete documentation index at: https://docs.martan.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Questions Widget

> Widget de perguntas e respostas sobre produtos

export const WidgetQuestions = () => {
  const $questions = useRef(null);
  useEffect(() => {
    window.MartanConfig = window.MartanConfig || ({
      _pendingConfig: null,
      init: function (options) {
        if (window.MartanConfig._realInit) {
          window.MartanConfig._realInit(options);
        } else {
          window.MartanConfig._pendingConfig = options;
        }
      },
      getStoreId: function () {
        return window.MartanConfig._storeId || null;
      },
      getStoreKey: function () {
        return window.MartanConfig._storeKey || null;
      }
    });
    window.MartanConfig.init({
      storeId: 550100411,
      storeKey: '82Bfif6uTlqycRjbAy36eoeJZaWCbgHo'
    });
    const scriptId = 'martan-widgets-script';
    if (!document.getElementById(scriptId)) {
      const script = document.createElement('script');
      script.id = scriptId;
      script.src = 'https://cdn.martan.app/widgets.dev.umd.js';
      script.async = true;
      document.body.appendChild(script);
    }
    const container = $questions.current;
    if (container) {
      container.innerHTML = '';
      const questionsWidget = document.createElement('martan-questions');
      questionsWidget.productSku = 'ms-csr-303';
      questionsWidget.productId = '5c7010a3c626be23430d4fb4';
      questionsWidget.enableNewQuestions = true;
      container.appendChild(questionsWidget);
    }
  }, []);
  return <div style={{
    padding: '5px',
    border: '1px solid #e5e7eb',
    borderRadius: '8px'
  }}>
      <div ref={$questions}></div>
    </div>;
};

O widget de perguntas e respostas permite que clientes façam perguntas sobre produtos e visualizem respostas de outros clientes e lojistas.

## Uso Básico

O widget de perguntas e respostas permite que clientes façam perguntas sobre produtos e visualizem respostas:

```html theme={null}
<martan-questions
  data-store-id="seu-store-id"
  data-store-key="sua-store-key"
  data-product-sku="PROD-123"
  data-enable-new-questions="true">
</martan-questions>
```

Ou usando `product-id`:

```html theme={null}
<martan-questions
  data-store-id="seu-store-id"
  data-store-key="sua-store-key"
  data-product-id="123"
  data-enable-new-questions="true">
</martan-questions>
```

**Com configuração global:**

```html theme={null}
<!-- Configuração global já definida -->
<martan-questions
  data-product-sku="PROD-123"
  data-enable-new-questions="true">
</martan-questions>
```

## Propriedades

### Atributos HTML

| Atributo                    | Tipo    | Obrigatório | Descrição                                      |
| --------------------------- | ------- | ----------- | ---------------------------------------------- |
| `data-store-id`             | string  | Sim\*       | ID da loja na API Martan                       |
| `data-store-key`            | string  | Sim\*       | Chave da API (web\_id) da loja                 |
| `data-product-id`           | string  | Sim\*       | ID do produto na API Martan                    |
| `data-product-sku`          | string  | Sim\*       | SKU do produto na API Martan                   |
| `data-enable-new-questions` | boolean | Não         | Permite criar novas perguntas (padrão: `true`) |

<Note>
  \* `data-store-id` e `data-store-key` podem ser omitidos se configurados globalmente. É necessário fornecer `data-product-id` OU `data-product-sku` (não ambos).
</Note>

### Propriedades JavaScript

| Propriedade          | Tipo    | Descrição                     |
| -------------------- | ------- | ----------------------------- |
| `storeId`            | string  | ID da loja                    |
| `storeKey`           | string  | Chave da API                  |
| `productId`          | string  | ID do produto                 |
| `productSku`         | string  | SKU do produto                |
| `enableNewQuestions` | boolean | Permite criar novas perguntas |

## Exemplos

<WidgetQuestions />

## Funcionalidades

* ✅ Integração com API Martan
* ✅ Listagem de perguntas e respostas
* ✅ Busca por palavras-chave
* ✅ Formulário para criar novas perguntas (via iframe)
* ✅ Carregamento incremental (mostrar mais perguntas)
* ✅ Suporte a respostas de lojistas