Criativo da caixa de diálogo responsiva

Sobre criativos de caixa de diálogo responsivos

O diálogo responsivo é um tipo criativo disponível para projetos de Website / App Insights. Esse tipo criativo permite que você crie criativos compatíveis com acessibilidade que respondam a diferentes tamanhos de dispositivo.

O criativo de diálogo responsivo fornece recursos de acessibilidade prontos para uso, sem a necessidade de atualizações adicionais baseadas em JavaScript que eram necessárias no passado.

Assim que você tiver acesso a esse recurso, a caixa de diálogo Responsiva estará disponível juntamente com outros criativos.

Depois de criar sua caixa de diálogo responsiva, há seis áreas que você pode personalizar antes de configurar seu interceptor: Tamanho & Estilo, Mensagem, Botões, Logos & Imagens, Animação e Traduções.

Tamanho & estilo

Na seção Tamanho & Estilo, você pode personalizar a aparência geral do criativo da seguinte forma:

Tamanho padrão & opções de estilo

Estas são as opções que aparecem se você não usar um destino incorporado e deixa Exibir pesquisa diretamente na caixa de diálogo desmarcada.

• Espaçamento de conteúdo: configurar a densidade do texto em seu criativo. Você pode selecionar Compacto, Médio ou Espaçoso.
• Cor: configure a cor de fundo do criativo escolhendo a partir da paleta de seleção de cores.
• Forma da borda: configure o raio da borda do seu criativo. Isso determina como os cantos são arredondados. Você pode escolher entre Nenhum, Levemente arredondado, Moderadamente arredondado, Muito arredondado.
• Sombra projetada: configure a sombra projetada em torno do seu criativo. Você pode escolher entre Nenhum, Claro, Médio, Pesado.

Exibir pesquisa diretamente no diálogo

Quando você seleciona Exibir pesquisa diretamente na caixa de diálogo, a pesquisa será incorporada ao criativo, em vez de ser vinculada a um botão. Para testar a experiência completa e precisa da pesquisa no criativo, use o bookmarklet. Consulte Testar interceptores para obter mais informações.

Selecionar essa opção remove as guias Mensagem e Botões porque você não terá mais uma mensagem ou botões na caixa de diálogo Responsiva, além do que já está definido na pesquisa de destino. A seleção desta opção também significa que você tem diferentes configurações de tamanho e estilo:

• Redimensionar a caixa de diálogo automaticamente para se ajustar à sua pesquisa: redimensione automaticamente a caixa de diálogo responsiva para ajustá-la à pesquisa que você está exibindo na caixa de diálogo. A janela será redimensionada automaticamente de acordo com o comprimento da primeira página da pesquisa.

  Qdica: Se você quiser que o criativo da caixa de diálogo responsiva seja dimensionado automaticamente para um tamanho maior, adicione mais perguntas à sua primeira página da pesquisa ou adicione mais espaçamento à sua pesquisa. Para reduzir o diálogo responsivo, mova as perguntas para outras páginas a seguir, adicione quebras de página ou diminua o espaçamento dentro da sua pesquisa.

• Cor: configure a cor de fundo do criativo escolhendo a partir da paleta de seleção de cores.
• Forma da borda: configure o raio da borda do seu criativo. Isso determina como os cantos são arredondados. Você pode escolher entre Nenhum, Levemente arredondado, Moderadamente arredondado, Muito arredondado.
• Sombra projetada: configure a sombra projetada em torno do seu criativo. Você pode escolher entre Nenhum, Claro, Médio, Pesado.
• Acessibilidade
  • Título do iframe: Este texto será lido por um leitor de tela quando o visitante navegar para a janela embutida.
    Qdica : Fornecer títulos Iframe durante a criação do seu diálogo garante que ele seja acessível aos usuários.

UTILIZAR UM MODELO

Se você quiser importar um tema de pesquisa para as configurações de estilo do criativo, clique em Usar um modelo.

Os temas são criados pelo Administrador da marca para o uso de usuários em sua marca. Selecione uma marca no menu suspenso e clique em Importar. Se você quiser adicionar um tema a esta lista, entre em contato com o Administrador da marca para obter mais informações.

A importação de um modelo de 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 de resposta
• Espaçamento da pergunta
• Contraste do primeiro plano
• Logotipo

CSS personalizado

Você pode personalizar o CSS do caixa de diálogo de respostas conforme desejado clicando em Personalizar CSS botão. Você pode adicionar classes e propriedades personalizadas além das padrões. As edições feitas aqui podem não ser refletidas na visualização; lembre-se de teste sua interceptor antes da implantação concluindo a configuração guiada.

-Clique aqui para visualizar o CSS padrão para diálogos responsivos-

Se você excluir os seletores ou classes CSS dentro do modelo predefinido, não poderá atualizar ou recarregar o modelo. Abaixo está este modelo caso você precise redefinir o CSS do seu intercept:

Qdica: Certifique-se de substituir o ID_DE_INTERCEPTAÇÃO no trecho abaixo com seu ID de interceptação .

/* Use as classes abaixo para substituir estilos de 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 implementar.
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 código personalizado, acesse https://community.qualtrics.com/custom-code-12 */
/* Estilizar shadowbox que aparece atrás do diálogo. NOTA: As alterações nesta shadowbox não serão refletidas no visualizador */
.QSIWebResponsiveShadowBox {
/* família de fontes: Arial, Helvética, sans-serif; */
/* z-índice: 1; */
/* margem superior: 10px !importante; */
/* espaço em branco: normal !importante; */
}
/* Estilizar o fade do contêiner */
.QSIWebResponsive-creative-container-fade {
/* */
}
/* Estilizar o contêiner principal do caixa de diálogo de respostas da web */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_content {
/* altura da linha: 1em !importante; */
/* margem: 0 0.5em 0 0 !importante; */
/* largura: auto !importante; */
/* tamanho da fonte: herdar !importante; */
/* espessura da fonte: normal !importante; */
/* estilo-de-fonte: normal !importante; */
/* exibir: inline !importante; */
/* cor: #000000 !importante; */
}
/* Estilizar a seção do contêiner do logotipo do criativo */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_logo-container {
/* exibir: bloco embutido !importante; */
/* margem direita: 5px !importante; */
}
/* 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_texto-container {
/* exibir: bloco embutido !importante; */
}
/* Estilize a seção de título do criativo */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_cabeçalho {
/* fonte: herdar !importante; */
}
/* Estilize a seção de descrição do criativo */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_descrição {
/* fonte: herdar !importante; */
/* fundo: transparente !importante; */
/* borda: nenhuma !importante; */
/* preenchimento: 0 !importante; */
/* vertical-align: meio !importante; */
/* margem: 0 0.4em 0 0 !importante; */
/* cursor: ponteiro !importante; */
}
/* Estilize o contêiner que abriga o(s) botão(ões) */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_botão-container {
/* exibir: bloco embutido !importante; */
}
/* Estilize o primeiro botão na caixa de diálogo */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_button-1 {
/* fonte: herdar !importante; */
/* preenchimento: .4em .4em !importante; */
/* largura mínima: 3em !importante; */
/* altura da linha: 1em !importante; */
/* raio da borda: 4px !importante; */
/* largura da borda: 1px !importante; */
/* border-style: sólido !importante; */
/* cursor: ponteiro !importante; */
/* fundo: #FFF !importante; */
/* cor: #000 !importante; */
/* cor da borda: #000 !importante; */
}
/* Estilize o segundo botão na caixa de diálogo */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_button-2 {
/* fonte: herdar !importante; */
/* preenchimento: .4em .4em !importante; */
/* largura mínima: 3em !importante; */
/* altura da linha: 1em !importante; */
/* raio da borda: 4px !importante; */
/* largura da borda: 1px !importante; */
/* border-style: sólido !importante; */
/* cursor: ponteiro !importante; */
/* fundo: #FFF !importante; */
/* cor: #000 !importante; */
/* cor da borda: #000 !importante; */
}
/* Estiliza o botão que fecha a caixa de diálogo */
.QSIWebResponsiveDialog-Layout1-INTERCEPT_ID_fechar-btn {
/* exibir: bloco embutido !importante; */
/* margem direita: 5px !importante; */
}
}

Mensagem

Na seção Mensagem, você pode configurar o Título e a Descrição que aparecem no seu criativo. A manchete deve ser geralmente uma frase curta que capta a atenção do visitante, enquanto a descrição dá mais detalhes sobre o motivo pelo qual o criativo apareceu para eles.

A fonte será adotada a partir do site que exibe o criativo. Para o título e a descrição, você pode personalizar o texto real, o tamanho da fonte e o peso da fonte.

Botões

Na seção Botões, você pode configurar opções específicas para o número, aparência e destino de cada botão.

1. Comece escolhendo o número de botões que deseja em seu criativo.
2. Especifique a forma do botão para cada botão escolhendo Nenhum, Ligeiramente arredondado, Moderadamente arredondado ou Completamente arredondado.
3. Especifique o tamanho do texto.
4. Para cada botão:
   • Indique seu Texto. É o que diz o botão.
   • Selecione o botão Ação para abrir destino ou rejeitar interceptor. Abrir destino indica que esse botão abrirá o destino especificado nos critérios de interceptação. Dispensar Interceptor simplesmente fechará o interceptor.
   • Escolha sua Cor do rótulo, Cor do plano de fundo e Cor da borda usando a paleta de seleção de cores.
   • Designe uma etiqueta ARIA. Por padrão, os leitores de tela lerão o texto que você indicar para a etiqueta do botão. No entanto, em alguns casos, você pode querer que o leitor de tela leia um contexto adicional, como, por exemplo, “Clique neste botão para abrir uma nova janela de pesquisa”. Neste caso, você pode indicar a etiqueta ARIA para os controles de botão.
     Atenção: Para tornar o seu criativo acessível, o rótulo ARIA deve corresponder ou incluir o texto do botão.

Logos & Imagens

Na seção Logotipos e imagens, você pode especificar 1 ou mais imagens/logotipos para incluir no seu criativo.

Você pode optar por carregar uma imagem separada para celular ou desktop, de modo que imagens diferentes sejam exibidas dependendo se o criativo for visto em um navegador para dispositivos móveis ou desktop. Você também pode carregar a mesma imagem, mas com resoluções diferentes para otimizar a exibição em qualquer um dos tipos de browsers de dispositivo.

Para tornar a acessibilidade da imagem compatível, você também tem a capacidade de especificar o Texto alternativo para ir com as imagens. (Alt Text é um recurso 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 (Esmaecer ou Deslizar) que deseja para o seu criativo conforme ele aparece na tela.

• Exibir diálogo após: o número de segundos após o usuário cumprir as condições de interceptação (por exemplo, clica no app) em que esse diálogo é exibido.
• Defina o temporizador para fechar a caixa de diálogo: determine quanto tempo depois da caixa de diálogo ela deve ser fechada. Desmarque esta 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 aparecer. Se você escolher Deslizar na animação, também pode selecionar a posição final do criativo na tela (Superior esquerdo, Superior direito, Inferior esquerdo, Inferior direito).
  Qdica: Usar o slide No tipo de transição faz com que este criativo se comporte como um Criativo deslizante.
• Plano de fundo da fachada: A cor da tela do dispositivo atrás do criativo (Nenhum, Luz, Médio ou Escuro).
• Exibição da pesquisa: onde a pesquisa será exibida (nova janela, janela incorporada, janela atual, janela de pop-under ou guia nova).

Conforme necessário, você também pode visualizar suas configurações de animação nesta tela, clicando em Visualizar animação.

Traduções

Você pode adicionar traduções para todo o texto em seu diálogo responsivo. Consulte a página Traduzindo Botões de Feedback & Diálogos Responsivos para obter instruções passo a passo.

Visualização do criativo da caixa de diálogo responsiva

Ao configurar o criativo de diálogo responsivo, você pode visualizar como o criativo ficará em diferentes tamanhos de tela (por exemplo, desktop, celular e tablet).

Salvando e publicando o Criativo de diálogo responsivo

À medida que você adiciona alterações ao criativo de diálogo responsivo, certifique-se de salvar periodicamente seu trabalho clicando no botão Salvar no canto inferior direito, logo acima da área de visualização.

Configurando interceptores

Criativos de diálogo
responsivos podem ser usados com interceptores padrão. Basta garantir que, ao definir o Criativo do interceptor, selecione o criativo da caixa de diálogo responsiva na seção Diálogo responsivo.