click to call widget
TRANSCRIPT
![Page 1: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/1.jpg)
Click To Call WidgetGuilherme Balena Versiani, Augusto Farnese, Michel Boaventura
![Page 2: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/2.jpg)
Sistema que permite chamadas telefônicas entre dois usuários, acionada através de Widget ou diretamente através de uma API Web, usando uma conta VoIP de um terceiro.
Duas chamadas são realizadas, podendo ocorrer dupla tarifação.
Um serviço unifica as duas chamadas; sua localização física na Internet pode interferir na qualidade das chamadas.
Descrição
![Page 3: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/3.jpg)
Pessoas VIP que queiram colocar uma forma “diferente” de comunicação em seu Blog;
Mercado SOHO/SMB, para comunicação via website (exemplo: pizzarias, jornais de anúncios);
Público
![Page 4: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/4.jpg)
Visão do Cliente Final
João
PizzariaJoão acessa http://pizza.com/,
digita seu número de telefone e clica em
“Ligar”.
Em seguida João recebe uma ligação com uma mensagem gravada da
pizzaria, avisando que a chamada está sendo
transferida, e em seguida ouve o sinal de
“chamada”.
A pizzaria atende a chamada e realiza o pedido do Cliente.
1
2
3
Considere que o cliente João deseja pedir uma pizza pelo site de uma pizzaria, e esta pizzaria utiliza o Click To Call para fazer pedidos:
![Page 5: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/5.jpg)
Visão da Pizzaria
José Carlos
José Carlos acessa o portal de aplicações (website) e cria uma conta para sua
pizzaria.
1
2José Carlos instala a
aplicação Click To Call em sua conta, e insere as configurações de sua
operadora.
José Carlos gera o código do Widget e coloca-o no site de
sua pizzaria
3
Considere que o gerente José Carlos decide usar o Click To Call para que os clientes que visitarem o site da pizzaria liguem para fazer pedidos:
![Page 6: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/6.jpg)
Como funciona?
![Page 7: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/7.jpg)
Como funciona?
O Cliente recebe o código Javascript do
Widget através do Blog em Blogger.com e o carrega no browser.
O Cliente recebe o código Javascript do
Widget através do Blog em Blogger.com e o carrega no browser.
1
Este é o Widget criado pelos
alunos da disciplina!!!
Este é o Widget criado pelos
alunos da disciplina!!!
HTTP + HTML + JavaScript
![Page 8: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/8.jpg)
Como funciona?
O Cliente preenche o formulário e o browser realiza um POST XML-
RPC na API Web da empresa ComunIP.
O Cliente preenche o formulário e o browser realiza um POST XML-
RPC na API Web da empresa ComunIP.
2
HTTP + XML-RPC
![Page 9: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/9.jpg)
Como funciona?
A ComunIP interage com o Skype for
Business para realizar a chamada usando o
protocolo SIP.
A ComunIP interage com o Skype for
Business para realizar a chamada usando o
protocolo SIP.
3
Pode ser qualquer terminação VoIP
desde que suporte SIP!!!
Pode ser qualquer terminação VoIP
desde que suporte SIP!!!
SIP
![Page 10: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/10.jpg)
Como funciona?
O Skype realiza a chamada telefônica
para o Cliente e reproduz uma mensagem.
O Skype realiza a chamada telefônica
para o Cliente e reproduz uma mensagem.
4
![Page 11: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/11.jpg)
Como funciona?Pizzaria
O Skype realiza a chamada telefônica
para a pizzaria.
O Skype realiza a chamada telefônica
para a pizzaria.
5
![Page 12: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/12.jpg)
Como funciona?Pizzaria
O Skype realiza a chamada telefônica
para a pizzaria.
O Skype realiza a chamada telefônica
para a pizzaria.
5Se o cliente não quiser pagar a segunda chamada,
pode usar um softphone ou um telefone VoIP.
Se o cliente não quiser pagar a segunda chamada,
pode usar um softphone ou um telefone VoIP.
![Page 13: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/13.jpg)
Como funciona?Pizzaria
O Skype realiza a chamada telefônica
para a pizzaria.
O Skype realiza a chamada telefônica
para a pizzaria.
5Se o cliente não quiser pagar a segunda chamada,
pode usar um softphone ou um telefone VoIP.
Se o cliente não quiser pagar a segunda chamada,
pode usar um softphone ou um telefone VoIP.
Mesmo assim, existem
operadoras em que o custo
total das ligações chega
a ser mais barato que
0800!!!
![Page 14: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/14.jpg)
Plano de Negócios
![Page 15: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/15.jpg)
Plano de NegóciosSegmentos de clientes
Propostas de Valor
Canais
Relacionamentos com o Cliente
Fontesde Renda
Recursos Chave
Atividades Chave
Parcerias Chave
Estrutura de Custo
Pessoas VIP
SOHO,SMB
0800 de baixo custo,
acionado via
website
![Page 16: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/16.jpg)
Plano de NegóciosSegmentos de clientes
Propostas de Valor
Canais
Relacionamentos com o Cliente
Fontesde Renda
Recursos Chave
Atividades Chave
Parcerias Chave
Estrutura de Custo
Pessoas VIP
SOHO,SMB
0800 de baixo custo,
acionado via
website
![Page 17: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/17.jpg)
Plano de NegóciosSegmentos de clientes
Propostas de Valor
Canais
Relacionamentos com o Cliente
Fontesde Renda
Recursos Chave
Atividades Chave
Parcerias Chave
Estrutura de Custo
Pessoas VIP
SOHO,SMB
0800 de baixo custo,
acionado via
website
Formulário de
Feedback
Forum Tickets
![Page 18: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/18.jpg)
Plano de NegóciosSegmentos de clientes
Propostas de Valor
Canais
Relacionamentos com o Cliente
Fontesde Renda
Recursos Chave
Atividades Chave
Parcerias Chave
Estrutura de Custo
Pessoas VIP
SOHO,SMB
0800 de baixo custo,
acionado via
website
Número de
cliques
Anúncios
sonoros
Taxa por minuto
Formulário de
Feedback
Forum Tickets
Equipe de suporte
Feedback dos
clientes
Operadoras
![Page 19: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/19.jpg)
Plano de NegóciosSegmentos de clientes
Propostas de Valor
Canais
Relacionamentos com o Cliente
Fontesde Renda
Recursos Chave
Atividades Chave
Parcerias Chave
Estrutura de Custo
Pessoas VIP
SOHO,SMB
0800 de baixo custo,
acionado via
website
Número de
cliques
Anúncios
sonoros
Taxa por minuto
Operadoras
Formulário de
Feedback
Forum Tickets
Vendas on-line
Paypal
Equipe de suporte
Feedback dos
clientes
![Page 20: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/20.jpg)
Plano de NegóciosSegmentos de clientes
Propostas de Valor
Canais
Relacionamentos com o Cliente
Fontesde Renda
Recursos Chave
Atividades Chave
Parcerias Chave
Estrutura de Custo
Pessoas VIP
SOHO,SMB
0800 de baixo custo,
acionado via
website
Número de
cliques
Anúncios
sonoros
Anúncios visuais
Taxa por minuto
Operadoras
Formulário de
Feedback
Forum Tickets
Equipe de suporte
Feedback dos
clientes
Google Vendas on-line
Paypal
![Page 21: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/21.jpg)
Plano de NegóciosSegmentos de clientes
Propostas de Valor
Canais
Relacionamentos com o Cliente
Fontesde Renda
Recursos Chave
Atividades Chave
Parcerias Chave
Estrutura de Custo
ComunIPPessoas
VIP
SOHO,SMB
0800 de baixo custo,
acionado via
website
Número de
cliques
Anúncios
sonoros
Anúncios visuais
Taxa por minuto
Operadoras
Formulário de
Feedback
Forum Tickets
Vendas on-line
Paypal
Equipe de suporte
Custos usoda API
Rede de serviços
Feedback dos
clientes
![Page 22: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/22.jpg)
O Widget
![Page 23: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/23.jpg)
Desenho da interface
Título configurável
Subtítulo configurável
Logotipo configurável
Texto do botão configurável
Cores configuráveis
Botão de ajuda
![Page 24: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/24.jpg)
Configurando o Widget
![Page 25: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/25.jpg)
Aba Configurações (Settings)
John.Doe
Username
SIP Server
Password
Widget
Settings
Port
sip.domain.com
5060
Transport
UDP TCP TLSv1
(55) 3187654321
Number to call
When clicked, the widget will make a call to this number
Save Close
Confirm Password
Podemos pensar em deixar a configuração manual para
operadoras não cadastradas, e
criar um “perfil” para “operadoras
cadastradas”. Voice Message
The caller will hear this message before to start a call
Use default
Nessa área podemos listar as operadoras cadastradas para
que o Cliente compre créditos. A compra a partir desse ponto
pode ser tarifada em “revenue share”. Contas em operadoras
cadastradas podem fazer aparecer um pequeno Widget
que mostra os créditos disponíveis aqui em baixo:
You have: US$ 30,00
![Page 26: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/26.jpg)
Aba WidgetTitle
Caption
Caption
Title
Call button text
Call us now!
Widget
Settings
Widget Colors
Logo
background font color
Completed message
Call completed, thanks for calling!
Help message
Help message goes here
Podemos pensar em vincular
algumas ajudas pré-estabelecidas para “operadoras
cadastradas”
Save Close
![Page 27: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/27.jpg)
Aba Widget – Seleção de Cores
Widget
SettingsTitle
Caption
Caption
Title
Call button text
Call us now!
Widget Colors
Logo
background font color
Completed message
Call completed, thanks for calling!
Help message
Help message goes here
Widget de seleçãode cores do jQuery
Save Close
![Page 28: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/28.jpg)
Projeto
![Page 29: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/29.jpg)
Como Cliente Final, preciso ver o Widget em meu website ou Blog.
Como Cliente Final, preciso inserir meu telefone e receber a ligação.
Como Cliente Final, após receber a ligação, preciso ligar para o Cliente.
Como Cliente, preciso ser capaz de configurar e gerar o Widget para meu site.
Desenhar a
interface
Balena
Passar para
HTML e CSS
Farnese
Criar gerador em PHP
Boaventura
Criar conta no Skype for Business
Balena
Gravar mensage
m de áudio
Farnese
Criar outra
linha de terminaçã
o no Skype4BBalena
Criar Javascript
para o Widget
Boaventura
Criar Painel de geração
do Widget
Balena
His
tóri
as
Criar Aba Settings
Fernese
Criar Aba Widget
Fernese
Adquirir hospedage
m
Balena
Publicar no site
Fernese
Publicar no Blog versão
de demonstraç
ão
Fernese
![Page 30: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/30.jpg)
Como Cliente Final, preciso ver o Widget em meu website ou Blog.
Como Cliente Final, preciso inserir meu telefone e receber a ligação.
Como Cliente Final, após receber a ligação, preciso ligar para o Cliente.
Como Cliente, preciso ser capaz de configurar e gerar o Widget para meu site.
Desenhar a
interface
Balena
Passar para
HTML e CSS
Farnese
Criar gerador em PHP
Boaventura
To Do In Progress Verify Done
Pri
meir
a i
tera
ção –
14
a 1
8 d
e ju
nh
o d
e 2
01
0
Criar conta no Skype for Business
Balena
Gravar mensage
m de áudio
Farnese
Criar Javascript
para o Widget
Boaventura
Publicar no Blog versão
de demonstraç
ão
Fernese
Criar outra
linha de terminaçã
o no Skype4BBalena
Criar Painel de geração
do Widget
Balena
Criar Aba Settings
Fernese
Criar Aba Widget
Fernese
Adquirir hospedage
m
Balena
Publicar no site
Fernese
![Page 31: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/31.jpg)
Como Cliente Final, preciso ver o Widget em meu website ou Blog.
Como Cliente Final, preciso inserir meu telefone e receber a ligação.
Como Cliente Final, após receber a ligação, preciso ligar para o Cliente.
Como Cliente, preciso ser capaz de configurar e gerar o Widget para meu site.
To Do In Progress Verify Done
Seg
un
da i
tera
ção –
21
a 2
5 d
e ju
nh
o d
e 2
01
0
Criar Painel de geração
do Widget
Balena
Criar Aba Settings
Fernese
Criar Aba Widget
Fernese
Adquirir hospedage
m
Balena
Publicar no site
Fernese
Desenhar a
interface
Balena
Passar para
HTML e CSS
Farnese
Criar gerador em PHP
Boaventura
Criar conta no Skype for Business
Balena
Gravar mensage
m de áudio
Farnese
Criar Javascript
para o Widget
Boaventura
Publicar no Blog versão
de demonstraç
ão
Fernese
Criar outra
linha de terminaçã
o no Skype4BBalena
![Page 32: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/32.jpg)
Como Cliente Final, preciso ver o Widget em meu website ou Blog.
Como Cliente Final, preciso inserir meu telefone e receber a ligação.
Como Cliente Final, após receber a ligação, preciso ligar para o Cliente.
Como Cliente, preciso ser capaz de configurar e gerar o Widget para meu site.
To Do In Progress Verify Done
Terc
eir
a i
tera
ção -
até
29
de ju
nh
o d
e 2
01
0
Criar Painel de geração
do Widget
Balena
Criar Aba Settings
Fernese
Criar Aba Widget
Fernese
Adquirir hospedage
m
Balena
Publicar no site
Fernese
Desenhar a
interface
Balena
Passar para
HTML e CSS
Farnese
Criar gerador em PHP
Boaventura
Criar conta no Skype for Business
Balena
Gravar mensage
m de áudio
Farnese
Criar Javascript
para o Widget
Boaventura
Publicar no Blog versão
de demonstraç
ão
Fernese
Criar outra
linha de terminaçã
o no Skype4BBalena
![Page 33: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/33.jpg)
Resultado em 30/06/2010
![Page 34: Click to call Widget](https://reader035.vdocuments.net/reader035/viewer/2022062709/5590adc51a28abb92a8b4731/html5/thumbnails/34.jpg)
http://asocialsoft.blogspot.com/
Acessem