Web Component

Um componente de widget de pesquisa personalizável construído com Vue.js que pode ser integrado a vários frameworks web. Este widget permite incorporar pesquisas SoluCX diretamente em suas aplicações com suporte para diferentes modos de exibição e manipulação abrangente de eventos.

Funcionalidades

🎯 Vários tipos de widget: inline, modal, barra inferior, caixa inferior (direita/esquerda)
📱 Design responsivo com dimensões personalizáveis
🔒 Foco em segurança com validação de domínio e sanitização de dados
📊 Analytics integrados e rastreamento de comportamento do usuário
⚡ Agnóstico de framework - funciona com Vue, React, Angular e outros
🎨 Estilização e posicionamento personalizáveis
📡 Manipulação de eventos em tempo real e callbacks

Instalação

npm install solucx-survey-widget

Configuração

O widget requer as seguintes propriedades:

Propriedade	Tipo	Obrigatório	Descrição
`soluCxKey`	`string`	✅	Sua chave de pesquisa SoluCX
`widgetType`	`WidgetType`	✅	Modo de exibição: `'inline'`, `'modal'`, `'bottomBar'`, `'bottomBox'`, `'bottomBoxLeft'`
`widgetData`	`WidgetData \| string`	✅	Dados da pesquisa (objeto ou string JSON)
`widgetOptions`	`WidgetOptions \| string`	❌	Opções de configuração

interface WidgetData {
    customer_id?: string
    email?: string
    name?: string
    phone?: string
    document?: string
    transaction_id?: string
    // ... outros campos personalizados
}

interface WidgetOptions {
    width?: number        // Largura do widget em pixels
    height?: number       // Altura do widget em pixels
    retry?: {
        attempts?: number   // Máximo de tentativas de repetição (padrão: 5)
        interval?: number   // Intervalo de repetição em dias (padrão: 1)
    }
    waitDelayAfterRating?: number // Dias de espera após avaliação (padrão: 60)
}

Exemplos de Uso Básico

Importação Direta e Uso

app.js

    // Importe o componente diretamente
    import SoluCXSurveyWidget from 'solucx-survey-widget'

    // Use em seu template/JSX
    <SoluCXSurveyWidget
    solu-cx-key="sua-chave-de-pesquisa"
    widget-type="inline"
    widget-data='{"customer_id": "12345", "email": "[email protected]"}'
    />
    ```

Componente Web (HTML/JS Puro)

app.html

    <!DOCTYPE html>
    <html>
    <head>
    <title>Pesquisa SoluCX</title>
    </head>
    <body>
    <!-- Inclua o widget -->
    <script type="module">
            import 'solucx-survey-widget'
    </script>
    
    <!-- Use o componente web -->
    <solucx-survey-widget
            solu-cx-key="sua-chave-de-pesquisa"
            widget-type="bottomBox"
            widget-data='{"customer_id": "12345", "email": "[email protected]"}'
            widget-options='{"width": 400, "height": 300}'
    ></solucx-survey-widget>

    <script>
            // Escute os eventos
            const widget = document.querySelector('solucx-survey-widget')
            
            widget.addEventListener('widgetCompleted', (event) => {
            console.log('Pesquisa concluída!')
            })
            
            widget.addEventListener('widgetError', (event) => {
            console.error('Erro no widget:', event.detail)
            })
    </script>
    </body>
    </html>
    ```

Uso via CDN

<!DOCTYPE html>
<html>
<head>
    <title>Pesquisa SoluCX - CDN</title>
</head>
<body>
    <!-- Carregue via CDN -->
    <script type="module" src="https://unpkg.com/solucx-survey-widget@latest/dist/index.js"></script>
    
    <!-- Use o componente -->
    <solucx-survey-widget
        solu-cx-key="sua-chave-de-pesquisa"
        widget-type="inline"
        widget-data='{"customer_id": "67890", "name": "João Silva"}'
    ></solucx-survey-widget>
</body>
</html>

Exemplos de Integração com Frameworks

Vue.js

app.vue

    <template>
    <div>
            <SoluCXSurveyWidget
            :solu-cx-key="surveyKey"
            widget-type="inline"
            :widget-data="surveyData"
            :widget-options="options"
            @widget-opened="onWidgetOpened"
            @widget-closed="onWidgetClosed"
            @widget-completed="onWidgetCompleted"
            />
    </div>
    </template>

    <script setup>
    import { ref } from 'vue'
    import SoluCXSurveyWidget from 'solucx-survey-widget'

    const surveyKey = 'sua-chave-de-pesquisa'
    const surveyData = ref({
    customer_id: '12345',
    email: '[email protected]',
    name: 'João Silva'
    })

    const options = ref({
    width: 600,
    height: 400
    })

    const onWidgetOpened = (userId) => {
    console.log('Widget aberto para o usuário:', userId)
    }

    const onWidgetClosed = () => {
    console.log('Widget fechado')
    }

    const onWidgetCompleted = (userId) => {
    console.log('Pesquisa concluída pelo usuário:', userId)
    }
    </script>
    ```

React

app.jsx

    import React, { useEffect, useRef } from 'react'
    import 'solucx-survey-widget'

    const SoluCXWidget = ({ 
    soluCxKey, 
    widgetType = 'inline', 
    widgetData, 
    widgetOptions = {},
    onWidgetCompleted,
    onWidgetClosed,
    onWidgetError 
    }) => {
    const widgetRef = useRef(null)

    useEffect(() => {
            const widget = widgetRef.current

            if (widget) {
            widget.soluCxKey = soluCxKey
            widget.widgetType = widgetType
            widget.widgetData = JSON.stringify(widgetData)
            widget.widgetOptions = JSON.stringify(widgetOptions)

            const handleCompleted = () => onWidgetCompleted?.(widgetData.customer_id)
            const handleClosed = () => onWidgetClosed?.()
            const handleError = (event) => onWidgetError?.(event.detail)

            widget.addEventListener('widgetCompleted', handleCompleted)
            widget.addEventListener('widgetClosed', handleClosed)
            widget.addEventListener('widgetError', handleError)

            return () => {
                    widget.removeEventListener('widgetCompleted', handleCompleted)
                    widget.removeEventListener('widgetClosed', handleClosed)
                    widget.removeEventListener('widgetError', handleError)
            }
            }
    }, [soluCxKey, widgetType, widgetData, widgetOptions])

    return <solucx-survey-widget ref={widgetRef} />
    }

    export default SoluCXWidget
    ```

Angular

app.jsx

    import { Component, Input, Output, EventEmitter, OnInit, ViewChild, ElementRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'

    @Component({
    selector: 'app-survey-widget',
    template: `
            <solucx-survey-widget 
            #widget
            [attr.solu-cx-key]="soluCxKey"
            [attr.widget-type]="widgetType"
            [attr.widget-data]="widgetDataString"
            [attr.widget-options]="widgetOptionsString"
            ></solucx-survey-widget>
    `,
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
    })
    export class SurveyWidgetComponent implements OnInit {
    @Input() soluCxKey!: string
    @Input() widgetType: string = 'inline'
    @Input() widgetData: any = {}
    @Input() widgetOptions: any = {}
    
    @Output() widgetCompleted = new EventEmitter<string>()
    @Output() widgetClosed = new EventEmitter<void>()
    @Output() widgetError = new EventEmitter<string>()

    @ViewChild('widget', { static: true }) widget!: ElementRef

    get widgetDataString(): string {
            return JSON.stringify(this.widgetData)
    }

    get widgetOptionsString(): string {
            return JSON.stringify(this.widgetOptions)
    }

    async ngOnInit() {
            await import('solucx-survey-widget')
            
            const widgetElement = this.widget.nativeElement
            
            widgetElement.addEventListener('widgetCompleted', () => {
            this.widgetCompleted.emit(this.widgetData.customer_id)
            })
            
            widgetElement.addEventListener('widgetClosed', () => {
            this.widgetClosed.emit()
            })
            
            widgetElement.addEventListener('widgetError', (event: any) => {
            this.widgetError.emit(event.detail)
            })
    }
    }
    ```

Eventos

O widget emite os seguintes eventos:

Evento	Descrição	Payload
`widgetOpened`	Widget exibido	`userId: string`
`widgetClosed`	Widget fechado	-
`widgetCompleted`	Pesquisa concluída	`userId: string`
`widgetError`	Ocorreu um erro	`error: string`
`widgetResized`	Altura do widget alterada	`height: number`
`widgetPageChanged`	Página da pesquisa alterada	`page: string`

inline: Incorporado diretamente no conteúdo da página
modal: Modal sobreposto com backdrop
bottomBar: Barra fixa na parte inferior com largura total
bottomBox: Caixa fixa no canto inferior direito
bottomBoxLeft: Caixa fixa no canto inferior esquerdo

Desenvolvimento

# Instale as dependências
npm install

# Rode os testes
npm test

# Build para produção
npm run build

Suporte

Para suporte e dúvidas, entre em contato com o time SoluCX ou consulte a documentação oficial.

React Native

Pacote React Native para integração com o SoluCX Widget

Chatbot Webhook

Nesta Página

Funcionalidades
Instalação
Configuração
- Estrutura dos Dados do Widget
- Opções do Widget
Exemplos de Uso Básico
Exemplos de Integração com Frameworks
Eventos
Tipos de Widget
Desenvolvimento
Suporte

Widget de Pesquisa SoluCX - SDK Web Component