Pular para o conteúdo principal

Artigo atualizado: 18 de fevereiro de 2022

SDK do Sparkcentral Messenger

O SDK do Sparkcentral Messenger permite que você implemente um mensageiro personalizável e completo em seu site ou dentro de seu aplicativo móvel. Isso permite que qualquer cliente que visite seu site ou usa seu aplicativo entre em contato diretamente com sua equipe de suporte, eliminando a necessidade de seus usuários usarem o Facebook, WhatsApp ou qualquer outra plataforma de mensagens.

Crie seu canal

  1. Vá para Configurações do administrador, expanda Canais e horário comercial e selecione Canais.
  2. Selecione Adicionar canal e, em seguida, selecione Sparkcentral Messenger.
  3. Na janela exibida, insira um nome para o seu canal de mensagens. Esse nome deve ser exclusivo e específico para a localização do seu mensageiro, como uma página da web específica ou seu aplicativo móvel. Selecione Avançar.
    Nota: Se a janela não aparecer, certifique-se de que seu navegador permita pop-ups do Sparkcentral.
  4. Salve as informações fornecidas na janela exibida.
    Observação: essas informações são exibidas apenas uma vez e, por isso é importante registrá-las agora.

Implemente o Messenger em seu site

Versão mais recente

A versão mais recente do nosso Web Messenger SDK pode ser encontrada aqui:

https://cdn.sparkcentral.com/rtm/web/2.1.0/loader.json

A versão anterior pode ser encontrada aqui: Sparkcentral Messenger SDK 1.25.7

Comece agora

As etapas a seguir são necessárias para que o Messenger apareça em seu site.

  1. Cole o código a seguir no final da> seção de< cabeça. (Certifique-se de copiar tudo!)

    <roteiro>

    ! function (s, c, o, i) {var a, p, u, d= [], f= []; função e () {var n=" 2.1.0"; tente {if (! i) lançar novo Erro (n); var e, t=" https://cdn.sparkcentral.com/rtm/web/2.1.0/", r=" sparkcentral"; if ((e= "string" ==typeof this.response? JSON.parse (this.response) :this.response) .url) {var s=C.getElementsByTagName ("script") [0], o=C.createElement ("script"); o.async=! 0; var a=i.match (/([0-9] +)\.? ([0-9] +)? \.? ([0-9] +)? /), p=a&& a [1]; if (&&a [3]) o.src=t+r+". "+i+" .min.js"; else{if(!(1<=p&&e["v"+p]))throw new Error(n);o.src=e["v"+p]} s.parentNode.insertBefore (o, s)}} catch (e) {e.message===n& &console.error (e)}} s [o] = {init:function () {a=arguments; var n= {then:function (e) {return f.push ({type:"t",next:e}), n}, catch:function (e) {return f.push ({type:"c",next:e}), n}}; return n}, on:function () {d.push(arguments)}, render:function (){p=arguments}, destroy:function () {u=arguments}}, s.__onWebMessengerHostReady__ =function (e) {if (delete s.__onWebMessengerHostReady__, s [o] =e, a) for (var n=e.init.apply (e, a), t=0; t <f.length; t++){var r=f[t];n="t"===r.type?n.then(r.next):n.catch(r.next)} p&& e.render.apply (e, p), u&& e. destroy.apply (e, u); for (t=0; t< d.length; t++) e.on.apply (e, d [t])}; var n=new XMLHttpRequest; n.addEventListener ("load", e), n.open ("GET "," https://cdn.sparkcentral.com/rtm/web/2.1.0/loader.json",! 0), n.ResponseType=" json", n.send ()} (janela, documento," Sparkcentral"," 2 ");

    </script>

  2. Cole o seguinte código de chamada de init no final da seção <body>. Isso inicializa um Web Messenger básico sem personalizações especiais. (As personalizações são descritas na próxima seção.)
  • Na terceira linha, insira o ID de integração do canal específico. Esta é uma das partes de texto geradas na criação do canal.
  • O campo região deve ser definido de acordo com a instância do Sparkcentral. O Sparkcentral está disponível nas seguintes regiões:
    Identificadores de região
    Região Identificador de região
    Estados Unidos Deixar não especificado
    União Europeia eu-1

Personalizar opções do Web Messenger

Várias opções estão disponíveis para personalizar seu Web Messenger. Veja a seguir um exemplo de um Web Messenger totalmente personalizado. Todas as opções usadas são documentadas seguindo o trecho de código.

Opções

As seguintes configurações gerais podem ser alteradas.

Opções, valores padrão e definições
Opção Opcional? Valor padrão Descrição
ID de integração Não - Seu ID de aplicativo/integração.
região sim - A região de destino na qual o aplicativo está localizado.
jwt sim - O token para autenticar sua comunicação com o servidor.
UserID sim - O ID do usuário.
AuthCode sim - Um código de autenticação para vincular a uma conversa existente.
localidade sim pt-PT

O local usado para formatação de data usando o formato `-`. Veja os códigos de idioma e os códigos de país.

Observação: a parte do país é opcional e, se um país não for reconhecido ou não for compatível, o aplicativo voltará ao idioma genérico. Se o idioma não for compatível, o aplicativo voltará para "en-US".

Observação: isso é usado apenas para formatação de datas e não fornece traduções integradas para o Web Messenger.

SoundNotificationEnabled sim verdadeiro Habilita a notificação sonora para novas mensagens.
ImageUploadEnabled sim verdadeiro Habilita o recurso de envio de imagens.
embutido sim FALSO Informa ao widget que ele está incorporado (consulte a seção Incorporado a seguir).
Estilo de exibição sim botão Como o Messenger aparece no seu site. Deve ser um botão ou uma guia.
buttonIconURL sim - Quando o displayStyle é um "botão", você pode selecionar seu próprio ícone de botão. A imagem deve ter pelo menos 200 x 200 pixels no formato JPG, PNG ou GIF.
BottonWidth sim 58px Quando o displayStyle é um "botão", você tem a opção de especificar a largura do botão.
BottonHeight sim 58px Quando o displayStyle é um "botão", você tem a opção de especificar a altura do botão.
Nome da empresa sim - Um nome comercial personalizado.
BusinessiconURL sim - Um URL de ícone comercial personalizado. A imagem deve ter pelo menos 200 x 200 pixels e deve estar no formato JPG, PNG ou GIF.
BackgroundImageURL sim - Um URL de imagem de fundo para a conversa. A imagem está lado a lado para caber na janela.
CustomColors sim Consulte a seção a seguir Cores usadas na interface do Web Messenger.
Texto personalizado sim Veja o exemplo a seguir

Strings usadas na interface do usuário do Web Messenger. Você pode usá-las para personalizar o texto ou traduzi-lo.

Observação: algumas strings incluem variáveis (cercadas por {}), que devem permanecer em seu texto personalizado.

MenuItems sim Consulte a seção a seguir  
PrechatCapture sim Consulte a seção a seguir  

Opções de cores

Você pode dar ao seu Web Messenger uma aparência personalizada editando as seguintes configurações.

Opções de cores, valores padrão e descrições
Opção Opcional? Valor padrão Descrição
BrandColor sim 65758e Essa cor é usada no cabeçalho do Messenger e no botão ou guia em estado ocioso. Deve ter uma cor hexadecimal de 3 ou 6 caracteres.
ConversationColor sim 0099ff Essa cor é usada para mensagens de clientes, respostas rápidas e ações no rodapé. Deve ter uma cor hexadecimal de 3 ou 6 caracteres.
ActionColor sim 0099ff Essa cor é usada para chamadas à ação dentro de suas mensagens. Deve ter uma cor hexadecimal de 3 ou 6 caracteres.

Opções de texto

O Web Messenger tem muitas opções de texto para escolher. Aqui estão alguns exemplos.

Valores padrão da opção de texto
Opção Valor padrão se não for usado
ActionPostbackError Ocorreu um erro ao processar sua ação. Por favor, tente novamente.
ClickToretry Mensagem não entregue. Clique para tentar novamente.
connectNotificationText Seja notificado dentro de seus outros aplicativos quando você receber uma resposta.
ConnectNotificationSingleText Seja notificado quando você receber uma resposta.
connectNotificationSingleButtonText Ativar> notificações de< nome
connectNotificationOthersText outras
ConversationTimestampHeaderFormat MMMM D AAAA, h:mm A
FetchHistory Carregue mais
FetchingHistory Recuperando histórico...
HeaderText Como podemos ajudar?
Espaço reservado de entrada Digite uma mensagem...
Texto de introdução Estamos aqui para conversar, então nos pergunte qualquer coisa!
InvalidFileError Somente imagens são suportadas. Escolha um arquivo com uma extensão suportada (jpg, jpeg, png, gif ou bmp).
LocationNotSuportado Seu navegador não oferece suporte a serviços de localização ou foi desativado. Por favor, digite sua localização.
LocationSecurityRestrição Este site não pode acessar sua localização. Por favor, digite sua localização.
LocationSendingFalha Não foi possível enviar o local
LocationServicesDenied Este site não pode acessar sua localização. Permita acesso em suas configurações ou digite sua localização.
MessageError Ocorreu um erro ao enviar sua mensagem. Por favor, tente novamente.
MessageIndicatorTitlePlural ({count}) Novas mensagens
MessageIndicatorTitleSingular ({count}) Nova mensagem
MessageRelativeTimeDay {value}d atrás
MessageRelativeTimeHour {value}h atrás
MessageRelativeTimeJustNow Agora mesmo
messageRelativeTimeInute {value}m atrás
MessageTimestampFormat h:mm A
MensageSending Enviando...
MensageDelivered Entregue
SendButtonText Enviar
ConfiguraçõesSheaderText Configurações
TapToRetry Mensagem não entregue. Toque para tentar novamente.
MessageType sem suporte Tipo de mensagem não suportado.
UnsupportedActionType Tipo de ação não suportado.
UploadDocument Faça upload de documento.
UploadInvalidError Arquivo inválido.
Uploadphoto Faça upload de foto.

Opções de menu

Itens de menu podem ser ativados ou desativados.

Valores e descrições padrão da opção de menu
Opção Opcional? Valor padrão Descrição
ImageUpload sim verdadeiro Ativa o item de menu de upload de imagem
FileUpload sim verdadeiro Ativa o item de menu de upload de arquivo
ShareLocation sim verdadeiro Ativa o item do menu de localização de compartilhamento

Opção de captura pré-chat

Essa opção permite que o Web Messenger publique automaticamente uma mensagem para o usuário. Você pode implementar uma variedade de mensagens. O trecho de código a seguir é o mesmo usado no exemplo anterior.

Copiar
PrechatCapture: {
enabled: true,
fields: [
{
type: 'email',
name: 'email',
label: 'Email',
placeholder: 'your@email.com'
}
{
type: 'text',
name: 'company-website',
label: 'Company website',
placeholder: 'mycompany.com'
},,
{
type: 'select',
name: 'company-size',
label: 'Tamanho da empresa',
espaço reservado: 'Escolha um número... ' ,
opções: [
{
name: '1-10',
label: '1-10 employees'
},
{
name: '11-50',
label: '11-50 employees'
},
{
name: '51+',
label: '51+ employees'
}
]
}
]
}
Nomes de campo e informações
Campo Informações
E-mail

name: 'Nome do campo',
label: 'Nome do rótula',
placeholder: 'Texto de espaço reservado aqui'”

Texto name: 'Nome do campo',
label: 'Nome do rótula',
placeholder: 'Texto de espaço reservado aqui'”
Selecione

Este é o formato no qual várias opções são adicionadas:

opções: [ { name: ‘Name of the first option’,
label: ‘Label of the first option’
},
{
name: ‘Name of the second option’,
label: ‘Label of the second option’
},
{
name: ‘Name of the third option’,
label: ‘Label of the third option’
}
]

Opção de modo incorporado

Você tem a opção de configurar o Web Messenger em um modo incorporado. Isso permite que você escolha onde deseja que o widget fique visível.

O exemplo a seguir ilustra o que você precisa para configurá-lo.

Observe que, para que o modo incorporado funcione, você deve definir o parâmetro de incorporado como true e chamar a função SparkCentral.render () manualmente.

Copiar
SparkCentral.init ({
integrationId: 'INTEGRATION_ID_HERE',
embedded: true,
region: 'eu-1'
}) .then (() =>{
// Your code after init is complete
}
SparkCentral.render (document.getElementById ('contêiner de bate-papo'));
JavaScript

Este exemplo incorpora o mensageiro Sparkcentral em um elemento DOM com o id “chat-container”. Se você abrir a página da Web, você notará que ela não está mais mostrando um botão no canto inferior direito, mas está visível no elemento contêiner.

Usar atributos de contato para salvar dados específicos do mensageiro

Você pode armazenar informações sobre a página da Web e o usuário usando o recurso Atributos de contato. Para habilitar isso, faça o seguinte:

  1. Na guia Configurações, expanda Área de trabalho do agente e selecione Atributos de contato.
  2. Encontre um dos Atributos de contato pré-fabricados na lista e alterne para Ativado.

Agora, quando um cliente entra em contato com você por meio do plug-in do Sparkcentral Messenger, esses dados específicos serão armazenados dentro de um Atributo de contato.

Atributos de contato disponíveis para o plugin Web Messenger
  • Idioma do navegador
  • Primeiro nome
  • Sobrenome
  • Domínio da página
  • Título da página
  • URL da página
  • ID do usuário

Use códigos de acesso para criar uma rica experiência de mensagens

Shortcodes são uma maneira útil de criar uma bela interface de mensagens.

Códigos de acesso disponíveis

Elementos de código curto e sintaxe
Elemento Sintaxe Exemplo
Botão Link % [] () % [Rótulo do botão] (http://anyurl.com)
Botão Responder % [] (resposta:) % [Rótulo do botão] (Resposta: Payload)
Botão de solicitação de localização % [] (localização) % [Rótulo do botão] (localização)
Imagem ! [] () ! [] (http://url-of.the/image.jpg)

Botão Link

Ao usar vários códigos de acesso do botão Link, você pode enviar ao usuário vários links em uma mensagem. Um exemplo:

% [Link para o Facebook] (https://facebook.com)

% [Link para o Twitter] (https://twitter.com)

% [Link para o LinkedIn] (https://linkedin.com)

Uma amostra de mensagem com três botões de link

Botão Responder

Ao usar vários códigos de acesso do botão Responder um sob o outro em uma mensagem, você pode oferecer ao usuário uma escolha. Por exemplo:

% [Vendas] (Resposta:Vendas)

% [Suporte] (Resposta:Support)

% [Engenharia] (Resposta:Engenharia)

Uma amostra de mensagem com três botões de resposta

Botão de compartilhamento de localização

Esse código permite que você “convide” o usuário para compartilhar sua localização com você.

Uma amostra de mensagem com um botão escrito "Compartilhe sua localização conosco"

Imagens

Você pode enviar imagens e gifs usando esse shortcode.

Uma amostra de mensagem com um GIF

Implemente o Messenger em seu aplicativo móvel

Uma ótima maneira de integrar o Sparkcentral em seus processos é incorporando nosso In-App Messenger. Este é um SDK que criamos que nossos clientes podem implementar em seus aplicativos.

Plataformas disponíveis

  • iOS
  • Android

Comece agora

iOS

Para usar nosso SDK com seu aplicativo iOS, você precisa adicioná-lo ao seu projeto Xcode.

Instale a dependência do SDK

  1. Instale o CocoaPods.

    O CocoaPods é um gerente de dependências para projetos Swift e Objective C Cocoa.

  2. Execute o seguinte comando em seu terminal:

    gem install cocoapods

  3. Diga ao Xcode que você está usando esse pod/dependência.

    Para fazer isso, crie um arquivo chamado podfile na pasta de origem do projeto. Nele, insira o seguinte e salve-o:

    Copiar
    projeto 'Localização do seu arquivo.xcproj '
    alvo' YourApp 'do
    pod' Sparkcentral '
    final
  4. Execute um comando para dizer ao Xcode para instalar o pod para que você possa usá-lo.

    No terminal, navegue até a pasta de origem do projeto.

    Digite o seguinte comando no terminal:

    instalação de pod

  5. Navegue até a pasta de origem e abra Info.plist. Nele, adicione as seguintes chaves e valores e salve-o.

    Copiar
    <chave> nsphotolibraryusageDescription<> 
    </string de chave >${PRODUCT_NAME}lerá sua biblioteca de fotos para coletar informações<>
    <adicionais/chave de string >NsphoTolibraryAddusageDescription<>
    </string de chave> ${PRODUCT_NAME}escreverá em sua biblioteca de fotos para coletar informações<>
    <adicionais/chave de string> NScamerausageDescription< /key>
    <string>${PRODUCT_NAME} usará sua câmera para reunir adicional informação< /string>

Use a estrutura em seu projeto

Objetivo C

Importe a estrutura em seu código-fonte:

#import" Sparkcentral/Sparkentral.H"

Objective-C

A primeira função a ser executada é a seguinte. Sua ID de integração deve ser alterada de acordo.

Copiar
[Sparkcentral initWithSettings: [SKCSettings SettingsWithIntegrationId: @" YOUR_INTEGRATION_ID"] CompletionHandler: ^ (NSerror * _Erro nullable, NSDictionary * _Nullable UserInfo){
// Your code after init is complete
}];

Swift

Copiar
SparkCentral.initWith (SKCSettings (IntegrationID:" YOUR_INTEGRATION_ID")){ (error: Error?, userInfo: [AnyHashable : Any]?) in
// Your code after init is complete
}

Referência de classe

Baixe as referências de classe para iOS e Android: https://www.hootsuite.com/uploads/downloadable-assets/sparkcentral-API-mobile-class-references.6.30.2021.zip.

Android

Vincule a dependência do SDK usando o Gradle. Você pode encontrar a dependência do Sparkcentral SDK no mavencentral (https://repo.maven.apache.org/maven2).

Para obter mais informações sobre o Gradle e a declaração de repositórios publicamente disponíveis, consulte https://docs.gradle.org/current/userguide/declaring_repositories.html#sec:declaring_public_repository

Usar o SDK

Inicialize a partir da classe Application. Adicione as seguintes linhas de código ao método onCreate na classe Application:

Copiar
SparkCentral.init (isto, novas Configurações ("YOUR_INTEGRATION_ID"), novo SparkCentralCallback () {
@Override
public void run (Resposta de resposta){
// Your code after init is complete
}
});

Certifique-se de substituir YOUR_INTEGRATION_ID pelo ID de integração gerado ao adicionar um novo canal do Web Messenger.

Se você não tiver uma classe Application, você deve criar uma para garantir que o Sparkcentral esteja sempre inicializado corretamente.

Referência de classe

Baixe as referências de classe para iOS e Android: https://www.hootsuite.com/uploads/downloadable-assets/sparkcentral-API-mobile-class-references.6.30.2021.zip.

 

Não consegue encontrar o que está procurando? Estamos aqui para ajudar