Caixa de diálogo de respostas
O que há nesta página
Sobre a Responsive Dialog Creatives
A caixa de diálogo de respostas é um tipo de interceptor guiada disponível para projetos do Website / App Insights. As caixas de diálogo responsivas ajudam você a criar sobreposições compatíveis com acessibilidade para o seu site, que são responsivas a diferentes tamanhos de dispositivos.
Assim que você tiver acesso a esse recurso, a caixa Caixa de diálogo de respostas ficará disponível junto com outros materiais publicitários.
Criando uma caixa de diálogo responsiva
Mantenha Platform definido como Website.
Selecione Overlay.
Clique em Create Interceptor.
Na página Setup (Configuração), selecione Appearance (Aparência).
Para usar o editor interceptor clássico, role a página para baixo e selecione Caixa de diálogo de respostas ”. Em seguida, siga as etapas 7 e 8 para personalizar a aparência da sua interceptor.
Qdica: Lançamos o novo Appearance Studio para a criação de layouts interceptor. Este editor oferece as mesmas opções de personalização descritas nesta página, mas com recursos mais avançados e uma interface mais flexível. Use o modelo “Popover central” ou “Notificação no canto” para começar.
Conclua as etapas descritas abaixo nesta página de suporte:
Adicione traduções, se necessário.
Clique em Adicionar conexão para adicionar um link ou pesquisa personalizado à caixa de diálogo.
Selecione uma das seguintes opções:
- Escolha uma pesquisa existente: Link para uma pesquisa à qual você tem acesso. Certifique-se de que o projeto que deseja usar esteja aberto e tenha um link anônimo disponível.
- Adicionar um link externo: Cole um URL completo.
Clique em Salvar conexão.
Adicionar lógica de direcionamento.
Adicionar dados integrados.
Ajuste as configurações de interceptor, como quando a interceptor é exibida e a conexão com o Diretório XM.
Publique suas alterações.
Qdica: para obter as últimas etapas de configuração e detalhes sobre o lançamento, você também pode consultar Criação de interceptações guiadas.
Tamanho & amp; Estilo
Na seção “Tamanho e estilo”, você pode personalizar a visual geral do material publicitário da seguinte forma:
Tamanho padrão & Opções de estilo
Essas são as opções que aparecem se você não usar um alvo incorporado e deixar a opção “Ex ibir pesquisa diretamente na caixa de diálogo” desmarcada.
- Espaçamento do conteúdo: Configure a densidade do texto em seu criativo. Você pode escolher entre “Compacto”, “Médio ” ou “Espaçoso”.
- Cor: Configure a cor de fundo do criativo escolhendo na paleta do seletor de cores.
- Forma da borda: Configure o raio da borda de seu criativo. Isso determina o grau de arredondamento dos cantos. Você pode escolher entre Nenhum, Levemente arredondado, Moderadamente arredondado e Muito arredondado.
- Sombra projetada: Configure a sombra projetada em torno de seu criativo. Você pode escolher entre Nenhum, Leve, Médio e Pesado.
Exibir Pesquisa diretamente na caixa de diálogo
Ao selecionar a opção “Exibir pesquisa diretamente na caixa de diálogo”, a pesquisa será incorporada ao anúncio, em vez de ser vinculada por meio de um botão. Para testar a experiência completa e precisa da pesquisa no criativo, use o bookmarklet. Consulte Interceptações de teste para saber mais.
Qdica: essa configuração substituirá as opções de exibição definidas nos conjuntos de ações conectados a esse criativo. Para obter mais informações sobre as opções de exibição conjunto de ações, consulte Opções de exibição.
Ao selecionar essa opção, as guias “Mensagem” e “Botões” serão removidas, pois você não terá mais nenhuma mensagem nem botões na caixa Caixa de diálogo de respostas, exceto o que já estiver definido na sua pesquisa de destino. Selecionar essa opção também significa que você tem configurações diferentes de Size & amp; Style:
Redimensione automaticamente a caixa de diálogo para ajustá-la ao seu pesquisa: Redimensione automaticamente a caixa de caixa de diálogo de respostas para se ajustar ao pesquisa que está sendo exibido na caixa de diálogo. A janela será redimensionada automaticamente de acordo com o comprimento da primeira página do seu pesquisa.
Qdica: O redimensionamento automático é limitado pela altura da janela do seu navegador. Se houver muitas perguntas na primeira página da sua pesquisa, você pode encurtá-la, por exemplo, movendo as perguntas ou inserindo uma nova quebra de página. Sua melhor opção para evitar que sua pesquisa seja interrompida, no entanto, é ativar a Nova Experiência de Resposta Pesquisa.
- Cor: Configure a cor de fundo do criativo escolhendo na paleta do seletor de cores.
- Forma da borda: Configure o raio da borda de seu criativo. Isso determina o grau de arredondamento dos cantos. Você pode escolher entre Nenhum, Levemente arredondado, Moderadamente arredondado e Muito arredondado.
- Sombra projetada: Configure a sombra projetada em torno de seu criativo. Você pode escolher entre Nenhum, Leve, Médio e Pesado.
- Acessibilidade
Título do iframe: Esse texto será lido por um leitor de tela quando o visitante navegar até a janela incorporada.
Qdica: Definir títulos para os iframes ao criar sua caixa de diálogo garante que ela seja acessível aos usuários.
Qdica: clique na seta no canto inferior esquerdo para exibir os rótulos das seções. Para exibir apenas os ícones de seção, clique em Hide Labels (Ocultar rótulos).
USAR UM MODELO
Se você quiser importar um tema pesquisa para as configurações de estilo do material publicitário, clique em “Usar um modelo”.
Os temas são criados pelo administrador Marca para uso dos usuários em sua marca. Selecione uma marca no menu suspenso e clique em Importar. Se você quiser adicionar um tema a essa lista, entre em contato com o administrador Marca para obter mais informações.
A importação de um modelo tema ajustará as seguintes configurações para o criativo:
- Cor primária
- Cor secundária
- Cor de fundo
- Tamanho do texto da pergunta
- Tamanho do texto da resposta
- Espaçamento da pergunta
- Contraste do primeiro plano
- Logotipo
Qdica: As configurações do criativo não estão vinculadas ao tema usado como modelo. As configurações do criativo não são atualizadas se o tema do modelo for alterado, e a alteração das configurações do criativo não alterará o tema do modelo.
CSS personalizado
Você pode personalizar o CSS da caixa caixa de diálogo de respostas como desejar clicando no botão “Personalizar CSS ”. Você pode adicionar classes e propriedades personalizadas, além das padrão. As edições feitas aqui podem não ser refletidas na visualização; lembre-se de testar sua interceptor antes da implementação, concluindo a configuração guiada.
Atenção: O código a seguir é fornecido no estado em que se encontra e requer conhecimento de programação para ser implementado. O suporte da Qualtrics não oferece assistência nem consultoria em codificação customizada. Em vez disso, você pode perguntar para nossa comunidade de usuários dedicados.
-Clique aqui para ver o CSS padrão para caixas de diálogo responsivas
-Clique aqui para ver o CSS padrão para caixas de diálogo responsivas
Qdica: não se esqueça de substituir o INTERCEPT_ID no trecho abaixo pelo ID do seu interceptor.
/* Use as classes abaixo para substituir os estilos caixa de diálogo de respostas.
Atenção: O código a seguir é fornecido no estado em que se encontra
e requer conhecimento de programação para ser implementado.
O suporte da Qualtrics não oferece assistência nem consultoria em codificação customizada.
Ao invés disso, você pode perguntar para nossa comunidade de usuários dedicados.
Para obter ajuda com o código personalizado, acesse https://community.qualtrics.com/custom-code-12 */
/* Estilo da caixa de sombra que aparece atrás da caixa de diálogo. OBSERVAÇÃO: as alterações nessa caixa de sombra não serão refletidas no visualizador */
.QSIWebResponsiveShadowBox {
/* font-family: Arial, Helvetica, sans-serif; */
/* z-index: 1; */
/* margin-top: 10px !important; */
/* white-space: normal !important; */
}
/* Estilize o fade do contêiner */
.QSIWebResponsive-creative-container-fade {
/* */
}
/* Estilize o contêiner principal da caixa caixa de diálogo de respostas da Web */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_content {
/* line-height: 1em !important; */
/* margin: 0 0.5em 0 0 0 !important; */
/* width: auto !important; */
/* font-size: inherit !important; */
/* font-weight: normal !important; */
/* font-style: normal !important; */
/* display: inline !important; */
/* color: #000000 !important; */
}
/* Estilize a seção do contêiner do logotipo do criativo */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_logo-container {
/* display: inline-block !important; */
/* margin-right: 5px !important; */
}
/* Estilize a seção do contêiner de texto do criativo. Isso inclui a seção de cabeçalho e a seção de descrição */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_text-container {
/* display: inline-block !important; */
}
/* Definir o estilo da seção de título do anúncio */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_headline {
/* font: inherit !important; */
}
/* Definir o estilo da seção de descrição do anúncio */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_description {
/* font: inherit !important; */
/* background: transparent !important; */
/* border: none !important; */
/* padding: 0 !important; */
/* vertical-align: middle !important; */
/* margin: 0 0.4em 0 0 !important; */
/* cursor: pointer !important; */
}
/* Define o estilo do contêiner que abriga o(s) botão(ões) */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_button-container {
/* display: inline-block !important; */
}
/* Definir o estilo do primeiro botão na caixa de diálogo */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_button-1 {
/* font: inherit !important; */
/* padding: .4em .4em !important; */
/* min-width: 3em !important; */
/* line-height: 1em !important; */
/* border-radius: 4px !important; */
/* border-width: 1px !important; */
/* border-style: solid !important; */
/* cursor: pointer !important; */
/* background: #FFF !important; */
/* color: #000 !important; */
/* border-color: #000 !important; */
}
/* Definir o estilo do segundo botão na caixa de diálogo */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_button-2 {
/* font: inherit !important; */
/* padding: .4em .4em !important; */
/* min-width: 3em !important; */
/* line-height: 1em !important; */
/* border-radius: 4px !important; */
/* border-width: 1px !important; */
/* border-style: solid !important; */
/* cursor: pointer !important; */
/* background: #FFF !important; */
/* color: #000 !important; */
/* border-color: #000 !important; */
}
/* Estiliza o botão que fecha a caixa de diálogo */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_close-btn {
/* display: inline-block !important; */
/* margin-right: 5px !important; */
}
}
Mensagem
Na seção “Mensagem”, você pode configurar o título e a descrição que serão exibidos no seu anúncio. O título geralmente deve ser uma frase curta que chame a atenção do visitante, enquanto a descrição fornece mais detalhes sobre o motivo pelo qual o criativo apareceu para ele.
A fonte será adotada a partir do site que exibe o criativo. Tanto para o cabeçalho quanto para a descrição, você pode personalizar o texto real, o tamanho e a espessura da fonte.
Botões
Na seção “Botões”, você pode configurar opções específicas relacionadas ao número, à aparência e ao destino de cada botão.
- Especifique seu texto. É isso que o botão diz.
- Escolha a ação do botão para abrir Destino ou dispensar Interceptor. Open Destino (Abrir alvo ) indica que esse botão abrirá o destino especificado em seus critérios de interceptor. Dispensar Interceptor simplesmente encerrará a interceptor.
- Escolha a cor do rótulo, a cor do plano de fundo e a cor da borda usando a paleta do seletor de cores.
- Designar um rótulo ARIA. Por padrão, os leitores de tela lerão o texto que você especificar para o rótulo do botão. No entanto, em alguns casos, talvez você queira que o leitor de tela leia um contexto adicional, como, por exemplo: “Clique neste botão para abrir uma nova janela pesquisa.” Nesse caso, você pode especificar o rótulo ARIA para os controles de botão. Atenção: Para tornar seu criativo acessível, o rótulo ARIA deve corresponder ou incluir o texto do botão.
Qdica: as fontes dos botões devem ser definidas explicitamente no CSS de seu site. Se a fonte não estiver definida, os botões usarão as configurações padrão de fonte definidas pelo navegador do usuário.
Logotipos e imagens
Na seção “Logotipos e imagens”, você pode especificar uma ou mais imagens/logotipos para incluir em seu anúncio.
Você pode optar por enviar uma imagem separada para dispositivos móveis ou computadores, de modo que sejam exibidas imagens diferentes dependendo se o anúncio for visualizado em um navegador de celular ou de computador. Você também pode carregar a mesma imagem, mas com resoluções diferentes para otimizar a exibição em qualquer tipo de navegador de dispositivo.
Qdica: se você carregar apenas uma imagem para celular, essa imagem será usada para navegadores de celular e de desktop. No entanto, se você carregar apenas uma imagem para desktop, essa imagem será usada somente para navegadores de desktop.
Para tornar a imagem compatível com as normas de acessibilidade, você também pode especificar o texto alternativo a ser associado às imagens. (Texto alternativo é um característica que permite que os leitores de tela descrevam uma imagem para usuários com deficiência visual)
Animação
Na seção “Animação” , você pode escolher o tipo de animação (Fade ou Slide In) que deseja para o seu anúncio, conforme ele aparece na tela.
- Exibir caixa de diálogo após: O número de segundos após o usuário atender às condições interceptor (por exemplo, clicar no aplicativo) para que essa caixa de diálogo seja exibida.
- Defina o cronômetro para fechar a caixa de diálogo: Determine quanto tempo após a exibição da caixa de diálogo ela deverá se fechar sozinha. Desmarque essa opção para forçar o usuário a fechar a caixa de diálogo para removê-la da tela.
Tipo de transição: Escolha se o criativo desaparece ou desliza na tela quando aparece. Se você escolher a animação Slide In, também poderá selecionar a posição final do criativo na tela (canto superior esquerdo, canto superior direito, canto inferior esquerdo, canto inferior direito).
Qdica: o uso do tipo de transição Slide In faz com que esse criativo se comporte como um Criativo Controle deslizante.
Qdica: O comando ` Fade` exibe uma sobreposição em tela cheia e mantém o foco do teclado na caixa de diálogo. O recurso “Slide In” no desktop não se sobrepõe à página e não retém o foco, de modo que os usuários que utilizam o teclado podem continuar navegando pela página com a tecla Tab. Em dispositivos móveis, o Slide In usa uma sobreposição e mantém o foco, assim como o Fade.
- Fundo esmaecido: A cor da tela do dispositivo por trás do anúncio (Nenhuma, Clara, Média ou Escura).
- Exibição Pesquisa: Onde a pesquisa será exibida (nova janela, janela incorporada, janela atual, janela pop-up ou nova guia).
Se necessário, você também pode visualizar as configurações da animação nesta tela, clicando em “Visualizar animação”.
Perguntas frequentes
Qual é a diferença entre interceptações autônomas, interceptações guiadas e criativos guiados?
Qual é a diferença entre interceptações autônomas, interceptações guiadas e criativos guiados?
Interceptações guiadas são quando você cria recursos como caixas de diálogo responsivas, feedback incorporado com modelo, botões de feedback e feedback incorporado ao aplicativo usando essas etapas. Também conhecidas como configurações guiadas, as interceptações guiadas combinam o elemento visual de um criativo e as configurações de um criativo em um fluxo fácil de seguir que o guiará do início ao fim.
Os criativos guiados são quando você cria recursos como caixas de diálogo responsivas, feedback incorporado com modelo, botões de feedback e feedback de aplicativo incorporado usando essas etapas. Com um criativo guiado, você precisa criar um interceptor separado para combiná-lo. Você ainda obtém o editor criativo aprimorado, mas não o restante da configuração guiada.
Criei um caixa de diálogo de respostas como um criativo, mas quero usá-lo como uma interceptor guiada. Posso trocá-lo?
Criei um caixa de diálogo de respostas como um criativo, mas quero usá-lo como uma interceptor guiada. Posso trocá-lo?
Posso salvar as configurações guiadas na biblioteca?
Posso salvar as configurações guiadas na biblioteca?
Isso é ótimo! Obrigado pelo seu feedback!
Obrigado pelo seu feedback!