Visão Geral
Quando os usuários interagem com o conteúdo do UserGuiding ou determinados eventos ocorrem (como o acionamento de um Guia ou Pesquisa), o SDK do UserGuiding pode notificar seu código por meio de eventos de callback. Esses eventos são acessados através do array global window.userGuidingLayer usando o método push().
Ao enviar um objeto com um nome de evento e uma função de callback (fn), você se inscreve nesse evento. Esse mecanismo é semelhante ao de como se escutam eventos de analytics.
Guia
Esses eventos estão relacionados ao início, ao progresso ou à conclusão dos Guias.
onPreviewStart
Executa uma função de callback quando a visualização de um Guia é iniciada.
Assinatura da Função de Callback
onUgPreviewStart({
event: 'previewStart',
guideId: number,
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onPreviewStart',
fn: onUgPreviewStart,
})onPreviewStep
Executa uma função de callback quando um passo de um Guia está sendo visualizado.
Assinatura da Função de Callback
onUgPreviewStep({
event: 'onPreviewStep',
guideId: number,
stepIndex: number,
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onPreviewStep',
fn: onUgPreviewStep,
})onPreviewEnd
Executa uma função de callback quando a visualização de um Guia foi finalizada.
Assinatura da Função de Callback
onUgPreviewEnd({
event: 'previewEnd',
guideId: number,
completed: boolean,
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onPreviewEnd',
fn: onUgPreviewEnd,
})onPreviewComplete
Executa uma função de callback quando todas as etapas do Guia são reproduzidas.
Assinatura da Função de Callback
onUgPreviewComplete({
event: 'previewComplete',
guideId: number,
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onPreviewComplete',
fn: onUgPreviewComplete,
})onPreviewDismiss
Executa uma função de callback quando o Guia é dispensado pelo usuário.
Assinatura da Função de Callback
onUgPreviewStart({
event: 'previewDismiss',
guideId: number,
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onPreviewDismiss',
fn: onUgPreviewDismiss,
})Hotspot
Os eventos abaixo ajudam a rastrear interações com Hotspots.
onHotspotInteract
Executa uma função de callback quando há interação com um Hotspot.
Assinatura da Função de Callback
onUgHotspotInteract({
event: 'hotspotInteract',
groupId: number,
hotspotId: string,
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onHotspotInteract',
fn: onUgHotspotInteract,
})onHotspotDismiss
Executa uma função de callback quando um Hotspot é descartado.
Assinatura da Função de Callback
onUgHotspotDismiss({
event: 'hotspotDismiss',
groupId: number,
hotspotId: string,
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onHotspotDismiss',
fn: onUgHotspotDismiss,
})Banner
Se você estiver usando Banners, os seguintes eventos se aplicam. Eles correspondem a ações nos Banners (os anúncios de atualização individuais).
onBannerDismiss
Executa uma função de callback quando o Banner é fechado pelo usuário.
Assinatura da Função de Callback
onUgBannerDismiss({
event: 'bannerDismiss',
bannerId: number,
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onBannerDismiss',
fn: onUgBannerDismiss,
})onBannerButtonClick
Executa uma função de callback quando um botão do Banner é clicado.
Assinatura da Função de Callback
onUgBannerButtonClick({
event: 'bannerButtonClick',
bannerId: number,
buttonId: string,
buttonText: string,
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onBannerButtonClick',
fn: onUgBannerButtonClick,
})Checklist
Esses eventos se referem às interações dos usuários com Checklists.
onChecklistComplete
Executa uma função de callback quando todos os itens da Checklist são concluídos.
Assinatura da Função de Callback
onUgChecklistComplete({
event: 'checklistComplete',
checklistId: number,
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onChecklistComplete',
fn: onUgChecklistComplete,
})onChecklistItemTrigger
Executa uma função de callback quando um item da Checklist é acionado.
Assinatura da Função de Callback
onUgChecklistItemTrigger({
event: 'checklistItemTrigger',
checklistId: number,
checklistItemId: number,
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onChecklistItemTrigger',
fn: onUgChecklistItemTrigger,
})onChecklistUrlClick
Executa uma função de callback quando um item de URL da Checklist é clicado.
Assinatura da Função de Callback
onUgChecklistUrlClick({
event: 'checklistUrlClick',
checklistId: number,
checklistItemId: string,
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onChecklistUrlClick',
fn: onUgChecklistUrlClick,
})onChecklistDismiss
Executa uma função de callback quando o usuário fecha a Checklist.
Assinatura da Função de Callback
onUgChecklistDismiss({
event: 'checklistDismiss',
checklistId: number,
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onChecklistDismiss',
fn: onUgChecklistDismiss,
})Resource Center
Os eventos do Resource Center são acionados quando os usuários interagem com módulos dentro do Resource Center.
onResourceCenterGuideTrigger
Executa uma função de callback quando um Guia dentro do Resource Center é acionado.
Assinatura da Função de Callback
onUgResourceCenterGuideTrigger({
event: 'resourceCenterGuideTrigger',
resourceCenterId: number,
guideId: number,
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onResourceCenterGuideTrigger',
fn: onUgResourceCenterGuideTrigger,
})onResourceCenterSurveyTrigger
Executa uma função de callback quando uma Pesquisa dentro do Resource Center é acionada.
Assinatura da Função de Callback
onUgResourceCenterSurveyTrigger({
event: 'resourceCenterSurveyTrigger',
resourceCenterId: number,
surveyId: number,
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onResourceCenterSurveyTrigger',
fn: onUgResourceCenterSurveyTrigger,
})onResourceCenterChecklistGuideTrigger
Executa uma função de callback quando um item de Guia de uma Checklist dentro do Resource Center é acionado.
Assinatura da Função de Callback
onUgResourceCenterChecklistGuideTrigger({
event: 'resourceCenterChecklistGuideTrigger',
resourceCenterId: number,
checklistId: number,
guideId: number,
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onResourceCenterChecklistGuideTrigger',
fn: onUgResourceCenterChecklistGuideTrigger,
})onResourceCenterChecklistUrlClick
Executa uma função de callback quando um item de URL de uma Checklist dentro do Resource Center é acionado.
Assinatura da Função de Callback
onUgResourceCenterChecklistUrlClick({
event: 'resourceCenterChecklistUrlClick',
resourceCenterId: number,
checklistId: number,
checklistItemId: string,
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onResourceCenterChecklistUrlClick',
fn: onUgResourceCenterChecklistUrlClick,
})onResourceCenterArticleLinkClick
Executa uma função de callback quando um link de artigo dentro do Resource Center é clicado.
Assinatura da Função de Callback
onUgResourceCenterArticleLinkClick({
event: 'resourceCenterArticleLinkClick',
resourceCenterId: number,
articleLink: string,
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onResourceCenterArticleLinkClick',
fn: onUgResourceCenterArticleLinkClick,
})onResourceCenterExternalUrlClick
Executa uma função de callback quando um item de URL dentro do Resource Center é clicado.
Assinatura da Função de Callback
onUgResourceCenterExternalUrlClick({
event: 'resourceCenterExternalUrlClick',
resourceCenterId: number,
externalUrl: string,
}) => void"
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onResourceCenterExternalUrlClick',
fn: onUgResourceCenterExternalUrlClick,
})Survey
Esses eventos se referem a Pesquisas sendo exibidas e respondidas.
onSurveyView
Executa uma função de callback quando uma Pesquisa está visível para o usuário final.
Assinatura da Função de Callback
onUgSurveyView({
event: 'surveyView',
surveyId: number,
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onSurveyView',
fn: onUgSurveyView,
})onSurveyQuestionView
Executa uma função de callback quando uma pergunta da Pesquisa está visível para o usuário final. Cada pergunta na pesquisa gera um novo evento de visualização de pergunta.
Assinatura da Função de Callback
onUgSurveyQuestionView({
event: 'surveyQuestionView',
surveyId: number,
questionId: string,
questionType: 'Star Rating' | 'Number Rating (5)' | 'Number Rating (10)' | 'Emoji Rating' | 'Thumbs Up/Down' | 'NPS Rating' | 'Multiple Choice' | 'Written Feedback',
responseId: string,
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onSurveyQuestionView',
fn: onUgSurveyQuestionView,
})onSurveyAnswer
Executa uma função de callback quando uma resposta da Pesquisa é enviada. Para cada pergunta da pesquisa, é disparado um evento de resposta separado. O usuário pode voltar e alterar a resposta, e múltiplos eventos seriam gerados nesse caso. Você pode usar o responseId para atualizar a resposta existente, e ambos os eventos terão o mesmo responseId.
Assinatura da Função de Callback
onUgSurveyAnswer({
event: 'surveyAnswer',
surveyId: number,
questionId: string,
questionType: 'Star Rating' | 'Number Rating (5)' | 'Number Rating (10)' | 'Emoji Rating' | 'Thumbs Up/Down' | 'NPS Rating' | 'Multiple Choice' | 'Written Feedback',
responseId: string,
score?: number,
emojiScore?: string,
choices?: string,
feedback?: string,
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onSurveyAnswer',
fn: onUgSurveyAnswer,
})AI Assistant
Se você tiver o AI Assistant ativado, há diversos eventos para entender o engajamento do usuário com o assistente. Esses eventos abrangem visualizações, ocultações e trocas de mensagens com o assistente.
onAiAssistantLauncherView
Executa uma função de callback quando o lançador do AI Assistant se torna visível para o usuário.
Assinatura da Função de Callback
onUgAiAssistantLauncherView({
event: 'aiAssistantLauncherView',
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onAiAssistantLauncherView',
fn: onUgAiAssistantLauncherView,
})onAiAssistantLauncherHide
Executa uma função de callback quando o lançador do AI Assistant é ocultado ou fechado.
Assinatura da Função de Callback
onUgAiAssistantLauncherView({
event: 'aiAssistantLauncherHide',
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onAiAssistantLauncherHide',
fn: onUgAiAssistantLauncherHide,
})onAiAssistantBoosterTooltipView
Executa uma função de callback quando a dica de ferramenta do booster do AI Assistant é exibida para o usuário.
Assinatura da Função de Callback
onUgAiAssistantBoosterTooltipView({
event: 'aiAssistantBoosterTooltipView',
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onAiAssistantBoosterTooltipView',
fn: onUgAiAssistantBoosterTooltipView,
})onAiAssistantWidgetView
Executa uma função de callback quando o widget do AI Assistant se torna visível para o usuário.
Assinatura da Função de Callback
onUgAiAssistantWidgetView({
event: 'aiAssistantWidgetView',
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onAiAssistantWidgetView',
fn: onUgAiAssistantWidgetView,
})onAiAssistantWidgetHide
Executa uma função de callback quando o widget do AI Assistant é fechado ou ocultado.
Assinatura da Função de Callback
onUgAiAssistantWidgetHide({
event: 'aiAssistantWidgetHide',
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onAiAssistantWidgetHide',
fn: onUgAiAssistantWidgetHide,
})onAiAssistantConversationStart
Executa uma função de callback quando uma nova conversa com o AI Assistant é iniciada.
Assinatura da Função de Callback
onUgAiAssistantConversationStart({
event: 'aiAssistantConversationStart',
threadId: string,
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onAiAssistantConversationStart',
fn: onUgAiAssistantConversationStart,
})onAiAssistantMessageSend
Executa uma função de callback quando o usuário envia uma mensagem para o AI Assistant.
Assinatura da Função de Callback
onUgAiAssistantMessageSend({
event: 'aiAssistantMessageSend',
threadId: string,
role: 'user',
message: string,
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onAiAssistantMessageSend',
fn: onUgAiAssistantMessageSend,
})onAiAssistantMessageReceive
Executa uma função de callback quando o AI Assistant envia uma mensagem de resposta ao usuário.
Assinatura da Função de Callback
onUgAiAssistantMessageReceive({
event: 'aiAssistantMessageReceive',
threadId: string,
role: 'assistant',
message: string,
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onAiAssistantMessageReceive',
fn: onUgAiAssistantMessageReceive,
})onAiAssistantFallbackMessageReceive
Executa uma função de callback quando o AI Assistant envia uma mensagem de fallback. Normalmente usado quando não há uma resposta automática adequada disponível.
Assinatura da Função de Callback
onUgAiAssistantFallbackMessageReceive({
event: 'aiAssistantFallbackMessageReceive',
threadId: string,
role: 'assistant',
message: string,
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onAiAssistantFallbackMessageReceive',
fn: onUgAiAssistantFallbackMessageReceive,
})onAiAssistantFallbackActionClick
Executa uma função de callback quando o usuário clica em uma ação de fallback na resposta do AI Assistant.
Assinatura da Função de Callback
onUgAiAssistantFallbackActionClick({
event: 'aiAssistantFallbackActionClick',
type: 'javascript' | 'url',
url?: string,
threadId: string,
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onAiAssistantFallbackActionClick',
fn: onUgAiAssistantFallbackActionClick,
})onAiAssistantArticleClick
Executa uma função de callback quando o usuário clica em um artigo da Base de Conhecimento listado na resposta do AI Assistant.
Assinatura da Função de Callback
onUgAiAssistantArticleClick({
event: 'aiAssistantArticleClick',
articleId: string,
articleName: string,
articleLink: string,
threadId: string,
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onAiAssistantArticleClick',
fn: onUgAiAssistantArticleClick,
})onAiAssistantGuideTrigger
Executa uma função de callback quando um guia sugerido pelo AI Assistant é iniciado pelo usuário.
Assinatura da Função de Callback
onUgAiAssistantGuideTrigger({
event: 'aiAssistantGuideTrigger',
guideId: string,
guideName: string,
threadId: string,
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onAiAssistantGuideTrigger',
fn: onUgAiAssistantGuideTrigger,
})User Identification
Há um evento relacionado ao processo de identificação do usuário:
onIdentificationComplete
Executa uma função de callback quando um usuário final é identificado com sucesso por meio do recurso de User Identification.
Assinatura da Função de Callback
onUgIdentificationComplete({
userStorage: Object
}) => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onIdentificationComplete',
fn: onUgIdentificationComplete,
})Others
onload
Executa uma função de callback quando o script do UserGuiding foi carregado e a API JavaScript está pronta para uso.
Assinatura da Função de Callback
onUgload() => void
Exemplo de Registro
window.userGuidingLayer.push({
event: 'onLoad',
fn: onUgLoad,
})
Importante: Para todos os callbacks acima, certifique-se de registrá-los antes que os eventos ocorram. Uma prática comum é incluir todas as chamadas window.userGuidingLayer.push({...}) antes do carregamento do script do UserGuiding (o script processará qualquer evento enfileirado assim que for inicializado), ou imediatamente após o carregamento. Alternativamente, você pode registrar os eventos dentro do evento onload do UserGuiding para garantir que o SDK esteja pronto.
Ao utilizar essas funções de callback, você pode integrar o UserGuiding profundamente à lógica da sua aplicação — por exemplo, registrando eventos em sua ferramenta de analytics, exibindo outros elementos da interface condicionalmente ou guiando usuários com base na interação deles com o conteúdo de onboarding. Cada evento oferece a oportunidade de responder ao comportamento do usuário em tempo real, tornando o onboarding e o suporte mais dinâmicos e personalizados.