Como customizar o Widget da página de produto?

Você sabia que é possível customizar algumas partes do nosso widget? 

Neste artigo você aprenderá como!

Requisitos: É necessário que sua loja já possua a versão mais atualizada do nosso widget, o qual chamamos de sincero ou widget v2. Você pode aprender mais sobre a instalação navegando por nosso FAQ ou clique aqui.

Vamos usar neste exemplo a customização do botão "Carregar Mais":

Passo 1)
Adicione a seguinte porção de código juntamente na sua estrutura que dá início ao nosso widget:

<script type="text/javascript">
  var customStyle = {
    buttonHasMore: {
      background: '#fd5e53',
      border: '1px solid #fd5e53',
      color: 'white',
      borderRadius: '4px'
    },

    buttonHasMoreHover: {
      background: '#ec7373',
      border: '1px solid #ce0f3d',
      color: 'black'
    }
 }
 window._trustvox =  [];
 _trustvox.push(['_storeId', 'Id-Loja']);

 _trustvox.push(['_productId',  productId]);
 _trustvox.push(['_productName', productName]);
 _trustvox.push(['_productPhotos', [url.image]]);
 // ESTA LINHA É A RESPONSÁVEL PELA CUSTOMIZAÇÃO:
 _trustvox.push(['_customStyle', customStyle]);
</script>

Passo 2)

Salvar e atualizar a sua página de produto, se tudo correu bem agora você deve ver algo como:

E pronto, você já aprendeu como deixar o nosso widget com o look n feel da sua empresa!

Obs: Existem diversas partes do sincero.js que podem ser customizadas, e estão disponíveis abaixo:

  • buttonHasMore
  • buttonHasMoreHover
  • buttonUpvote
  • buttonUpvoteHover
  • buttonUpvoteSelected
  • buttonDownvote
  • buttonDownvoteHover
  • buttonDownvoteSelected
  • buttonDefault
  • buttonDefaultHover
  • buttonDefaultDisabled
  • buttonSuccess
  • buttonSuccessHover
  • buttonSuccessDisabled
  • buttonDanger
  • buttonDangerHover
  • buttonDangerDisabled
  • surveyAttributeBar
  • surveyAttributeBarLabel
  • surveyAttributeBarItem
  • surveyAttributeBarItemLabel
  • surveyAttributeBarItemSelected
  • recommendationsText
  • recommendationsValue
  • recommendationsMainline
  • recommendationsBaseline
  • recommendationsIE10
  • starsBackground
  • starsForeground
  • generalText
  • productRateNoteValue
  • productRateNoteOf
  • productRateLabel
  • productRateBasedOn
  • noReviewsTitle
  • noReviewsMessage
  • featuredTitle
  • featuredCount
  • featuredText
  • reviewRate
  • reviewInfo
  • reviewText
  • reviewRecommendation
  • reviewVoteQuestion
  • reviewReply
  • questionsHeaders
  • questionsQuestion
  • questionsAnswer
  • questionInfo
  • questionInput
  • questionInputFocus
  • questionInputSuccess
  • questionInputDanger
  • questionsPrivateAnswer
  • trustvoxLogo
  • footerContainer
  • importFonts

Se você quer customizar algo que não está nesta lista, basta entrar em contato com o meajuda@reclameaqui.com.br :D

Ainda precisa de ajuda? Entre em contato Entre em contato