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
- Vá para Configurações do administrador, expanda Canais e horário comercial e selecione Canais.
- Selecione Adicionar canal e, em seguida, selecione Sparkcentral Messenger.
- 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.
- 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.
- 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>
- 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

<script>
var initPromise = SparkCentral.init ({
integrationId: 'ID de integração aqui',
//Deixar não especificado para região dos EUA (padrão)
região: 'eu-1',
//Isso garante que o cliente não possa criar várias conversas.
canUserCreateMoreConversations: false,
canUserSeeConversationList: false,
CustomColors:{
brandColor: '65758e',
conversationColor: '65758e',
actionColor: '65758e',
},
MenuItems:{
imageUpload: true,
fileUpload: true,
shareLocation: true
},
fixedHeader: false,
customText: {
actionPaymentCompleted: 'Pagamento concluído',
ActionPaymentError: 'Ocorreu um erro ao processar o cartão. <br> Tente novamente ou use um cartão diferente.” ,
ActionPostbackError: 'Ocorreu um erro ao processar sua ação. Por favor, tente novamente. ' ,
ClickToRetry: 'Mensagem não entregue. Clique para tentar novamente.” ,
ClickToRetyForm: 'Formulário não enviado. Clique em qualquer lugar no formulário para tentar novamente.” ,
connectNotificationText: 'Sincronize sua conversa e continue nos enviando mensagens através do seu aplicativo favorito. ' ,
connectNotificationSingleText: 'Seja notificado quando receber uma resposta. ' ,
ConversationListheaderText: 'Minhas conversais',
ConversationListPreviewanOnyMousText: 'Alguém',
ConversationListPreviewCarouselText: '{user}enviou uma mensagem',
ConversationListPreviewFileText:'{user} enviou um arquivo',
ConversationListPreviewFormText: '{user}enviou um formulário',
ConversationListPreviewFormResponseText:'{user} preencheu um formulário',
ConversationListPrevieWimageText: '{user}enviou uma imagem',
ConversationListPreviewLocationRequestText: '{user}enviou uma solicitação de local',
ConversationListPreviewUserText:' Você ',
ConversationListRelativeTimeJustNow: 'Agora mesmo”,
ConversationListRelativeTimeMinute: '1 minuto atrás',
ConversationListRelativeTimeMinutes:' {value}minutos atrás',
ConversationListRelativeTimeHour: '1 hora atrás',
ConversationListRelativeTimeHours: '{value}horas atrás',
ConversationListRelativeTimeOntem:' Ontem ',
ConversationListTimestampFormat:' MM/DD/AA ',
ConversationTimestampHeaderFormat: 'MMMM D AAAA, h:mm A',
CouldNotConnect: 'Offline. Você não receberá mensagens. ' ,
CouldNotConnectRetry: 'Reconectando... ' ,
CouldNotConnectRetySucesso:" Você está de volta online! ",
CouldNotLoadConversations: 'Não foi possível carregar conversas. ' ,
EmailChangeAddress: 'Alterar meu e-mail',
EmailDescrição: 'Para ser notificado por e-mail quando você receber uma resposta, insira seu endereço de e-mail. ' ,
EmailFieldLabel: 'Email',
EmailFieldPlaceholder: 'Seu endereço de e-mail',
EmailFormButton: 'Enviar',
EmailLinkingErrorMessage: 'Envie um endereço de e-mail válido. ' ,
fetchHistory: 'Carregar mais',
FetchingHistory: 'Recuperando histórico... ' ,
FileToolargeError: 'Limite máximo de tamanho de arquivo excedido ({size}) ',
FileTypeError: 'Tipo de arquivo não suportado.' ,
formErrorInvalideMail: 'Email é inválido',
ForErrorNoLongerThan: 'Não deve conter mais do que ({characters}) caracteres ',
formErrorNoShorterThan: 'Deve conter pelo menos ({characters}) caracteres,
formErrorUnknown: 'Isso não parece muito certo',
FormFieldSelectPlaceHolderFallback: 'Escolha um... ' ,
FrontendeMailChannelDescription: 'Para falar conosco usando e-mail, basta enviar uma mensagem para o nosso endereço de e-mail e nós\ responderemos em breve: ',
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... ' ,
InputPlaceHolderBlocked: 'Preencha o formulário acima... ' ,
IntroAppText: 'Envie uma mensagem abaixo ou do seu aplicativo favorito. ' ,
LineChannelDescription: 'Para falar conosco usando LINE, digitalize este código QR usando o aplicativo LINE e envie-nos uma mensagem. ' ,
LinkChannelPageHeader: 'Sincronize sua conversa',
LinkError: 'Ocorreu um erro ao tentar gerar um link para este canal. Por favor, tente novamente. ' ,
LocationNotSupported: 'Seu navegador não suporta serviços de localização ou foi desativado. Por favor, digite sua localização. ' ,
LocationSecurityRestriction: 'Este site não pode acessar sua localização. Por favor, digite sua localização. ' ,
LocationSendingFailed: 'Não foi possível enviar localização',
LocationServicesDenied: 'Este site não pode acessar sua localização. Permita acesso em suas configurações ou digite sua localização.” ,
messageIndicatorTitlePlural: '({count}) Novas mensagens',
messageIndicatorTitleSingular:' ({count}) Nova mensagem ',
messageRelativeTimeDay:'{value} dago',
messageRelativeTimeHour: ' {value}h
agora', messageRelativeTimeJustNow: 'Agora mesmo ',
messageRelativeTimeInute:'{value} m
agora', messageTimestampFormat: 'h:mm A',
messageDelivered: 'Entregue',
messageSeen: 'Visto',
messagesEnding: 'Enviando... ' ,
MessengerChannelDescription: 'Conecte sua conta do Facebook Messenger para ser notificado quando você receber uma resposta e continuar a conversa no Facebook Messenger. ' ,
newConversationButtonText: 'New Conversation',
NotificationSettingSchannelsDescription: 'Sincronize esta conversa conectando-se ao seu aplicativo de mensagens favorito para continuar a conversa do seu jeito. ' ,
NotificationSettingSchannelStitle: 'Outros canais',
NotificationSettingsConnected: 'Connected',
NotificationSettingsConnecteDas: 'Conectado como{username} ',
PrechatCaptureReetingText: 'Oi lá\ nPara começar, gostaríamos de saber um pouco mais sobre você:',
PrechatCaptureNameLabel: 'Seu nome',
PrechatCaptureNamePlaceholder: 'Digite seu nome... ' ,
PrechatCaptureEmaillabel: 'Email',
PrechatCaptureEmailPlaceholder: 'name@company.com',
PrechatCaptureConfirmationText: 'Obrigado por isso! Com o que podemos ajudá-lo?” ,
PrechatCaptureMailGunLinkingConfirmation: 'Você será notificado aqui e por e-mail{email} imediatamente respondermos. ' ,
sendButtonText: 'Enviar',
SettingsHeaderText: 'Configurações',
ShareLocation: 'Localização',
SMSBadRequestError: 'Não foi possível nos comunicar com este número. Tente novamente ou use um diferente.” ,
SMSancel: 'Cancelar',
SMSChangeNumber: 'Alterar meu número',
SMSChannelDescrição: 'Conecte seu número SMS para ser notificado quando receber uma resposta e continuar a conversa por SMS. ' ,
SMSchannelPendingDescription: 'Verifique suas mensagens em{number} para confirmar seu número de telefone. ' ,
SMSContinue: 'Enviar',
SMSInvalidNumberError: 'Envie um número de telefone válido. ' ,
SMSLinkCancelelled: 'O link para{appUserNumber} foi cancelado. ' ,
SMSLinkPending: 'Pendente',
SMSpingChannelError: 'Ocorreu um erro ao enviar uma mensagem para o seu número. ' ,
SMSSendText: 'Envie-me um texto',
SMSStartTexting: 'Start Texting',
SMSTOoManyRequestSerror: 'Uma conexão para esse número foi solicitada recentemente. Por favor, tente novamente em{minutes} minutos.” ,
SMStooManyRequestsOneMinuteError: “Uma conexão para esse número foi solicitada recentemente. Por favor, tente novamente em 1 minuto.” ,
SMSUNHandlederror: 'Algo deu errado. Por favor, tente novamente. ' ,
SyncConversation: 'Sincronizar conversa',
TaptoRetry: 'Mensagem não entregue. Toque para tentar novamente.” ,
TapToRetyForm: 'Formulário não enviado. Toque em qualquer lugar no formulário para tentar novamente.” ,
TelegramChannelDescription: 'Conecte sua conta do Telegram para ser notificado quando você receber uma resposta e continuar a conversa no Telegram',
uploadDocument: 'Arquivo',
UploadInvalidError: 'Arquivo inválido',
UploadPhoto: 'Image',
UploadVirusError: 'Um vírus foi detectado em seu arquivo e foi rejeitado”,
UnsupportedMessageType: 'Tipo de mensagem não suportado. ' ,
UnsupportEdActionType: 'Tipo de ação não suportado. ' ,
ViberChannelDescription: 'Conecte sua conta Viber para ser notificado quando receber uma resposta e continuar a conversa no Viber. Para começar, escaneie o código QR usando o aplicativo Viber.” ,
ViberChannelDescriptionMobile: 'Conecte sua conta Viber para ser notificado quando receber uma resposta e continuar a conversa no Viber. Para começar, instale o aplicativo Viber e toque em Conectar. ' ,
ViberQRCodeError: 'Ocorreu um erro ao buscar seu código Viber QR. Por favor, tente novamente. ' ,
WeChannelDescription: 'Conecte sua conta WeChat para ser notificado quando receber uma resposta e continuar a conversa no WeChat. Para começar, escaneie esse código QR usando o aplicativo WeChat.” ,
WeChannelDescriptionMobile: 'Conecte sua conta WeChat para ser notificado quando receber uma resposta e continuar a conversa no WeChat. Para começar, salve esta imagem de código QR e carregue-a em< um href=\ 'weixin: //dl/scan\ '>QR code scanner< /a>.' ,
WeChatQRCodeError: 'Ocorreu um erro ao buscar o código QR do WeChat. Por favor, tente novamente. ' ,
WhatsAppChannelDescriptionDesktop: 'Sincronize sua conta com o WhatsApp digitalizando o código QR ou clicando no link abaixo. \ nEm seguida, envie a mensagem pré-preenchida para validar a solicitação de sincronização. (Seu código:{{code}}). ' ,
WhatsAppChannelDescriptionMobile: 'Sincronize sua conta com o WhatsApp clicando no link abaixo. \ nEm seguida, envie a mensagem pré-preenchida para validar a solicitação de sincronização. (Seu código:{{code}}). ' ,
WhatsApplinkingError: 'Ocorreu um erro ao buscar suas informações de vinculação do WhatsApp. Por favor, tente novamente. '
}
}) .then (function (){
// Your code after init is complete
});
</script>

Abre o widget de conversa (NOOP quando incorporado)
SparkCentral.open ();
Fecha o widget de conversa (NOOP quando incorporado)
SparkCentral.close ();
Informa se o widget está aberto ou fechado no momento.
SparkCentral.isOpened ();
Registra um usuário no Web Messenger, recuperando as conversas que o usuário já teve em outras sessões do navegador e/ou dispositivos. Observe que você não precisa chamar isso depois de `init` se você já passou o id externo e o jwt como argumentos na chamada para `init`, caso em que isso é feito internamente como parte da sequência de inicialização. Isso retorna uma `Promise` que resolve quando o Web Messenger está pronto novamente.
SparkCentral.login ('externa-id', 'some-jwt');
Desconecta o usuário atual e reinicializa o widget com um usuário anônimo. Isso retorna uma promessa que resolve quando o Web Messenger estiver pronto novamente.
SparkCentral.logout ();
Destrói o Web Messenger e o faz desaparecer. O Web Messenger precisa ser reinicializado com `init` para funcionar novamente, pois também limpa o id de integração do Web Messenger. Ele também desvinculará todos os ouvintes que você possa ter com `SparkCentral.on`.
SparkCentral.destroy ();
Envia uma mensagem para a conversa direcionada em nome do usuário.
sparkCentral.sendMessage (
{
type: 'text',
text: 'hello'
},
'<conversation-id>'
);
//OU
sparkCentral.sendMessage ('olá', '<conversation-id' >');
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.

SparkCentral.init({
integrationId: '<integration-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 <nome>',
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çã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çã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.
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.
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.
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'
}
]
}
]
}
Campo | Informações |
---|---|
name: 'Nome do campo',
|
|
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’,
|
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.
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:
- Na guia Configurações, expanda Área de trabalho do agente e selecione Atributos de contato.
- 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
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)
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)
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
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
-
Instale o CocoaPods.
O CocoaPods é um gerente de dependências para projetos Swift e Objective C Cocoa.
-
Execute o seguinte comando em seu terminal:
gem install cocoapods
-
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:
Copiarprojeto 'Localização do seu arquivo.xcproj '
alvo' YourApp 'do
pod' Sparkcentral '
final -
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 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.
[Sparkcentral initWithSettings: [SKCSettings SettingsWithIntegrationId: @" YOUR_INTEGRATION_ID"] CompletionHandler: ^ (NSerror * _Erro nullable, NSDictionary * _Nullable UserInfo){
// Your code after init is complete
}];
Swift
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:
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