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.

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

Expandir por código

Copiar

SparkCentral.init({
appId: '<app-id>',
//Deixar não especificado para região dos EUA (padrão)
região: 'eu-1',
//Para o modo autenticado
jwt: 'your_jwt',
userId: 'user_id',
locale: 'en-US',
customColors: {
brandColor: '65758e',
conversationColor: '65758e',
actionColor: '65758e',
},
 
menuItems: {
imageUpload: true,
fileUpload: true,
shareLocation: true
},
 
fixedIntroPane: false, 
 
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...',
options: [
{
name: '1-10',
label: '1-10 employees'
},
{
name: '11-50',
label: '11-50 employees'
},
{
name: '51+',
label: '51+ employees'
}
]
}
]
},
customText: {
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 receber uma resposta'.,
connectNotificationSingleText: 'Seja notificado quando receber uma resposta.',
connectNotificationSingleButtonText: 'Ativar> notificações de <name>',
connectNotificationOthersText: 'others',
conversationTimestampHeaderFormat: 'MMMM D AAAA, h: mm A',
fetchHistory: 'Carregar mais',
fetchingHistory: 'Recuperando histórico...',
fileToolargeError: 'Limite máximo de tamanho de arquivo excedido ({size})',
FileTypeError: 'Tipo de arquivo não compatível.',
headerText: 'Como podemos ajudar?',
imageClickToReload: 'Clique para recarregar a imagem.',
ImageClickToView: 'Clique para ver a {size} imagem.',
ImagePreviewNotAvailable: 'Visualização não disponível.',
inputPlaceholder: 'Digite uma mensagem...',
introductionText: 'Estamos aqui para conversar, então pergunte-nos qualquer coisa!',
invalidFileError: 'Somente imagens são compatíveis. Escolha um arquivo com uma extensão compatível (jpg, jpeg, png, gif ou bmp).',
locationNotSupported: 'Seu navegador não é compatível com serviços de localização ou foi desativado. Em vez disso, digite sua localização.',
locationSecurityRestriction: 'Este site não pode acessar sua localização. Em vez disso, digite sua localização.',
locationSendingFailed: 'Não foi possível enviar locação',
locationServicesDenied: 'Este site não pode acessar sua localização. Permita o 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',
messageIndicatorTitleSimular: '({count}) Nova mensagem',
messageRelativeTimeDay: '{value}d atrás',
messageRelativeTimeHour: '{value}h atrás',
messageRelativeTime Just Now: 'Só agora',
messageRelativeTimeMinute: '{value}m atrás', 
messageTimeStamFormat: 'h: mm A',
messageSending: 'Enviando...',
messageDelivered: 'Entregue',
prechatCaptureReetingText: 'Olá\ nPara começar, gostaríamos de saber um pouco mais sobre você:',
prechatCaptureConfirmationText: 'Obrigado por isso! Com o que podemos ajudá-lo?',
sendButtonText: 'Enviar',
settingsHeaderText: 'Configurações',
shareLocation: 'Compartilhar local',
tapToRetry: 'Mensagem não entregue. Toque para tentar novamente.',
unsupportedMessageType: 'Tipo de mensagem não compatível.',
unsupportedActionType: 'Tipo de ação não compatível.',
uploadDocument: 'Carregar documento',uploadInvalidError: 'Arquivo inválido',
uploadPhoto: 'Carregar foto',
}
}).then(function() {
// Your code after init is complete
});
initPromise.then(function() {
// do something
});
//passar à frente...
initPromise.then(function() {
//do something else
});

Opções

As seguintes configurações gerais podem ser alteradas.

Opções de cores

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

Opções de texto

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

Itens de menu

Itens de menu podem ser ativados ou desativados.

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.

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'
}
]
}
]
} 

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

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)

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)

Botão de compartilhamento de localização

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

Imagens

Você pode enviar imagens e gifs usando esse shortcode.

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:

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.

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

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

Swift

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:

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:

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.