Integração SmartHint

Documentação para integração da Busca e das Vitrines SmartHint.

A integração utiliza a API SmartHint “Vitrines por Página com Produtos”, que permite exibir vitrines de recomendações de produtos (módulos dinâmicos) posicionadas na Home do aplicativo, juntamente com os produtos que as compõem.

Essa funcionalidade faz uso do parâmetro /WithProducts, responsável por retornar não apenas os metadados da vitrine (como título e posição), mas também a lista completa de produtos associados a ela.

🔗 Documentação da rota utilizada:
https://developers.smarthint.co/#ac7ee721-b9cf-4150-8bfa-eaf27e191899

---

1. Informações necessárias para configuração inicial

Para habilitar a integração, é necessário entrar em contato com o suporte da Kobe:
📧 [e-mail]

Envie as informações abaixo, que são essenciais para a ativação da Busca e das Vitrines:

• URL da Loja

• Plataforma (ex: VTEX, Tray, Nuvemshop etc.)

• Cluster

• SHCode (código identificador SmartHint)

Esses dados serão adicionados como parâmetros de configuração do aplicativo.

---

2. Configuração via CMS (VTEX)

2.1 Configuração para exibição na Home

1. Acesse a configuração da página Home no CMS VTEX.

2. Adicione um componente do tipo Carrossel de Produto, que será utilizado para exibir as vitrines na Home.

3. No campo Tipo de listagem do carrossel, selecione a opção:

   smart-hint-recommendation

   Esse tipo indica que o carrossel exibirá as vitrines de recomendações geradas pela API SmartHint.

4. No campo Identificador, informe o ID da vitrine que deseja exibir, seguindo o padrão:

   local:position

   Exemplo: home:01 para a primeira vitrine na Home, home:02 para a segunda, e assim por diante.

5. Configure o Título do carrossel para facilitar a identificação no CMS.

2.2 Configuração para exibição em outras páginas (ex: carrinho)

Para adicionar vitrines fora da Home, como na página do carrinho ou outras áreas, siga os passos abaixo:

1. No CMS VTEX, acesse a aba Headless CMS e clique em Criar documento.
   

2. Selecione o tipo de documento Content Container para criar um novo container de conteúdo.

3. Dentro da configuração do novo documento, na seção de componentes, adicione um componente de Carrossel de Produto.
   

4. Na aba Settings do componente, defina:

   • Um Título descritivo, por exemplo: "Vitrine SmartHint Carrinho" para facilitar o gerenciamento e seguir o exemplo abaixo:
     
     

---

3. Padrão dos identificadores de vitrines

Os identificadores de vitrines SmartHint devem seguir o formato:

local:position

Exemplos:

• home:01 → primeira vitrine da Home

• product:02 → segunda vitrine da página de produto

• cart:01 → vitrine na página do carrinho

Locais disponíveis:

• home — página inicial

• cart — carrinho

• emptycart — carrinho vazio

• product — página de produto

A position corresponde à ordem da vitrine na página, variando de 01 a 05.

Ao final, lembre-se de publicar a alteração realizada no painel do CMS VTEX para que ela seja aplicada no aplicativo.

---

4. Exemplo Visual da Vitrine Ativa

Abaixo segue vitrine SmartHint "O que outros clientes estão vendo" ativa:

 

Caso fique com alguma dúvida, você pode enviar um e-mail para 📩 [e-mail]