Pular para o conteúdo principal

  Artigo atualizado: 04 de janeiro de 2022

SDK do Sparkcentral Messenger 1.25.7

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.

Implementando 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/1.25.7/loader.json

Comece agora

Criar um 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. Essas informações serão exibidas apenas uma vez, então é importante gravá-las agora.

Implemente o Web Messenger em seu site

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

No final da> tag< principal, cole o seguinte código. (Certifique-se de copiar tudo).

<roteiro>

var loaderUrl = 'https://cdn.sparkcentral.com/rtm/web/1.25.7/loader.json'

! function (e, n, t, r) {function s () {try {var e; if ((e=" string" ==typeof this.response? JSON.parse (this.response) :this.response) .url) {var t=N.getElementsByTagName ("script") [0], r=N.createElement ("script"); r.async=! 0, r.src=e.url, t.parentNode.insertBefore (r, t)}} catch (e) {}} var o, p, a, c= [], i= []; e [t] = {init:function () {o=arguments; var e= {then:function (n) {return i.push ({type:"t",next:n}), e}, catch:function (n) {return i.push ({type:"c",next:n}), e}}; return e}, em: function (){c.push(arguments)}, render:function (){p=arguments}, destroy:function () {a=arguments}}, e.__onWebMessengerHostReady__ =function (n) {if (delete e.__onWebMessengerHostReady__, e [t] =n, o) for (var r=n.init.apply (n, o) , s=0; s< i.length; s++){var u=i[s];r="t"===u.type?r.then(u.next):r.catch(u.next)} p&& n.render.apply (n, p), a& &n.destroy.apply (n, a); for (s=0; s< c.length; s++) n.on.apply (n, c [s])}; var u=new XMLHttpRequest; u.addEventListener ("load", s), u.open ( "GET", LoaderURL,! 0), u.responseType=" json", u.send ()} (janela, documento," Sparkcentral");

</script>

Cole o seguinte código de chamada init no final da> seção< body para inicializar o Messenger sem nenhuma personalização especial. Na terceira linha, insira o ID do aplicativo do canal específico. Este é um dos trechos de texto gerados na criação do canal.

Copiar
<script>
//TODO Sparkcentral APP_ID, substitua isso pelo seu próprio para executar esta demonstração.
var appID = 'SEU ID DE APLICATIVO AQUI';
//função para inicializar o Sparkcentral; isso também registrará todos os nossos eventos que queremos ouvir.
//essa função será chamada quando o documento terminar de carregar. (evento no final desta tag de script)
function initialiseSparkCentral () {
 
//Exibe uma mensagem informando que há mensagens não lidas
SparkCentral.on ('UnreadCount', function (UnreadCount) {
//criar uma mensagem com base nas mensagens não lidas count
var message = 'There are'+ unreadCount +' unreadCount + 'unread mensagens.';
if (unreadCount == 1) {
message = 'There is one unread message.';
}
});
//Inicialize o Sparkcentral,
//Adicione suas opções personalizadas aqui
SparkCentral.init({
appId:appId,
businessName: 'Seu nome comercial aqui',
customText: {
headerText: 'Your header text here',
inputPlaceholder: 'Your input-placeholder here',
introductionText: 'Your introduction text here',
messageSending: 'Sending...',
messageDelivered: 'Delivered',
sendButtonText: 'Send',
},
CustomColors: {
brandColor: '000000',
conversationColor: '4690DC',
actionColor: '4690DC',
},
menuItems: {
imageUpload: 'true',
},
}).then(function() {
});
}
//quando nosso documento terminar de carregar, inicializaremos nossa instância do sparkcentral.
window.addEventListener ('load', function () {
initialiseSparkcentral();
});
</script>

Personalize suas 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.

Ajuste sua região

O campo região deve ser definido de acordo com a instância do Sparkcentral. No código de inicialização a seguir, há um campo chamado região: 'eu-1'. Isso inicializa a versão européia do mensageiro. Para acessar o mensageiro dos Estados Unidos, deixe o campo não especificado.

Tabela de identificadores de região
Região Identificador de região
Estados Unidos Deixar não especificado
União Europeia eu-1

Opções

As seguintes configurações gerais podem ser alteradas.

Tabela de opções gerais
Opção Opcional? Valor padrão Descrição
AppID Não ID do aplicativo
região sim A região de destino na qual o aplicativo está localizado
jwt sim Token para autenticar sua comunicação com o servidor
UserID sim ID do usuário
AuthCode sim Um código de autenticação para vincular a uma conversa existente
localidade sim pt-PT Localidade usada para formatação de data usando o formato <language>-<COUNTRY>. Os códigos de idioma podem ser encontrados aqui, e os códigos de país, aqui. **Observação 1: ** a parte do país é opcional e, se um país não for reconhecido ou compatível, ele voltará a usar o idioma genérico. Se o idioma não for compatível, ele voltará para en-US. Observação 2: isso é usado apenas para formatação de data 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 upload de imagem.
embutido sim FALSO Informa ao widget que ele será incorporado. (consulte a seguinte seção Incorporado)
Estilo de exibição sim botão Escolha como o mensageiro aparecerá em seu site. Deve ser botão ou guia.
buttonIconURL sim Quando o botão DisplayStyle for, você tem a opção de selecionar seu próprio ícone de botão. A imagem deve ter pelo menos 200 x 200 pixels e deve estar no formato JPG, PNG ou GIF.
BottonWidth sim 58px Quando o botão DisplayStyle for, você tem a opção de especificar a largura do botão.
BottonHeight sim 58px Quando o botão DisplayStyle for, você tem a opção de especificar a altura do botão.
Nome da empresa sim Um nome comercial personalizado.
BusinessiconURL sim Uma URL personalizada de ícone comercial. A imagem deve ter pelo menos 200 x 200 pixels e estar no formato JPG, PNG ou GIF.
BackgroundImageURL sim Uma URL de imagem de fundo para a conversa. A imagem será colocada 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á-los para personalizar o texto ou traduzi-lo. Nota: 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.

Tabela de opções de cores
Opção Opcional? Valor padrão Descrição
BrandColor sim 65758e Essa cor será usada no cabeçalho do mensageiro e no botão ou guia no estado ocioso. Deve ter uma cor hexadecimal de 3 ou 6 caracteres.
ConversationColor sim 0099ff Essa cor será usada para mensagens do cliente, respostas rápidas e ações no rodapé. Deve ter uma cor hexadecimal de 3 ou 6 caracteres.
ActionColor sim 0099ff Essa cor será usada para call-to-actions 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.

Tabela de opções 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.

Itens de menu

Itens de menu podem ser ativados ou desativados.

Tabela de opções 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

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'
}
]
}
]
}
Tabela de opções de pré-chat
Campo Informações
E-mail name: 'Nome do campo', label: 'Nome do rótulo', espaço reservado: 'Texto de espaço reservado aqui'”
Texto name: 'Nome do campo', label: 'Nome do rótulo', espaço reservado: 'Texto de espaço reservado aqui'”
Selecione Este é o formato no qual várias opções são adicionadas:options: [{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’}]

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

Tabela de códigos de acesso
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 links de botão

Botão Responder

Ao usar vários códigos curtos 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

Começando

iOS

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

Instalando a dependência do SDK

A primeira coisa a fazer é instalar o CocoaPods. O CocoaPods é um gerente de dependências para projetos Swift e Objective C Cocoa.

Para instalá-lo, execute o seguinte comando em seu terminal.

gem install cocoapods

Em seguida, ell Xcode você usará 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

Agora 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

Navegue até a pasta de origem e abra o arquivo 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"

A primeira função a ser executada é a seguinte. O ID do aplicativo deve ser alterado de acordo.

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

Swift

Copiar
SparkCentral.initWith (SKCSettings (APPID:" YOUR_APP_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

Vincular a dependência do SDK

Inclua o seguinte código no arquivo Gradle:

Copiar
repositórios {
maven{
url "https://sparkc.bintray.com/rtm"
}
}
dependências{
compile 'com.sparkcentral:core:latest.release'
compile 'com.sparkcentral:ui:latest.release'
}

Usando 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_APP_ID"), novo SparkCentralCallback () {
@Override
public void run (Resposta de resposta){
// Your code after init is complete
}
});

Certifique-se de substituir YOUR_APP_ID pelo ID do aplicativo 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