►
Description
In this 10-minute developer-focused demo, Lee Ford delivers an application sample that allows Microsoft Teams to interact with external users via Web Chat. Uses Bot Framework, Azure Cosmos DB to store conversations, adaptive cards and activity handlers for conversation. Architecture and code reviewed. External user submits request in Web Chat form. Communications about request limited to internal Teams channel except when Bot is @ mentioned. Easily add new channel, web chat bot to app. This PnP Community demo is taken from the General Microsoft 365 Development Special Interest Group (SIG) - Bi-weekly sync call recorded on September 30, 2021.
Demo Presenter: Lee Ford (Symity) | @lee_ford
Supporting materials:
• Sample - Teams WebChat Sample | https://github.com/leeford/teams-webchat-sample
Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos
A
My
name's
lee
ford
solution,
architect,
microsoft,
mvp
and
today,
I'm
going
to
do
a
demo
on
web
chat
in
microsoft
teams.
So
what
is
web
chat
so
web
chats,
probably
all
used
it,
but
ultimately
it's
a
way
of
chatting
to
other
people
via
a
website.
You
know
I've
got
an
amazon
example
here,
but
it
could
be
anything
really
and
the
idea
is
that
the
user
doesn't
need
to
install
an
app
or
or
have
a
piece
piece
of
software.
A
They
can
virtually
go
to
a
website,
click
a
button
and
then
join
a
chat
with
someone
on
the
other
end
that
might
be
ai.
That
might
be
a
real
person,
but
what
we're
trying
to
do
here
is,
at
the
other
end,
is
actually
within
teams.
So
we
are
looking
to
when
someone
joins
a
web
chat.
Then
they're
unaware
that
it's
teams
on
the
other
end,
but
ultimately
it
saves
the
person
on
the
other
end
having
to
have
another
client.
In
addition
to
teams.
A
A
So,
on
the
left
hand
side
we
have
the
web
chat
on
the
right
hand,
side
we
have
teams
and
effectively
what
happens
is
the
user
goes
to
a
website
and
they
just
fill
in
the
for.
If
I
just
refresh
the
page
to
show
you,
you
basically
get
presented
with
a
a
blank
page.
This
is
using
the
sort
of
base
basic
web
chat
sample.
A
A
I
can
talk
just
sort
of
within
the
channels,
but
like
has
anyone
picked
this
up
and
that
won't
go
through
because
the
bot
hasn't
been
mentioned,
and
then
I
can
mention
the
bot
and
it
will
then
through
into
the
web
chat-
and
I
can
put
I
and
yeah
so
on
and
so
forth.
What
else
you
can
do
is
you
can
effectively
once
once
the
chat's
finished?
A
I'm
not
going
to
kind
of
pretend
to
chat
with
myself,
but
if
I
end
the
chat,
I
can
give
some
sort
of
closing
notes,
and
these
are
only
within
teams.
They
don't
appear
in
the
in
the
web
chat,
and
this
is
just
customer
satisfied
or
you
know
whatever
you
want
to
put,
and
you
can
send
that
and
then
it
effectively
ends
the
cheat
ends.
The
the
chat,
getting
notification
on
both
ends.
A
A
A
A
The
team,
it
should
ask
me
what
do
I
want
it
to
appear
as
so,
this
will
be.
What
does
it
show
is
in
the
drop
down
over
here?
So
if
I
just
call
it
what's
called
after
sales
to
be
consistent
and
now,
if
I
refresh
this
page,
I
have
an
additional
category
to
to
send
a
send
a
chat
request
through
to
so
that's
it
demonstration-wise
I'll,
just
quickly
knit
back
to
the
powerpoint
and
go
through
it.
So
what?
What
is
it?
What
is
in
there
and
effectively?
A
What
we
have
is
a
web
app,
that's
running
or
using
bot
framework.
It's
using
bot
services,
then,
with
two
different
channels.
We've
got
the
direct
line,
stroke
web
chat
channel
and
we've
also
got
the
teams
channel
and
then
we're
using
cosmos
db
to
effectively
store
the
conversation,
references
and
anything
related
to
the
two
conversations,
because,
ultimately,
in
this
scenario,
there's
actually
two
conversations
that
are
completely
separate.
A
You've
got
the
the
web
chat
talking
to
our
web
app
and
then
you've
got
the
teams
user
talk
to
our
web
app,
but
they
don't
actually
directly
talk
effectively.
We're
proxying
the
the
chat
between
the
two
and
sort
of
going
over
the
high
level
process
what's
happening
here
is
an
activity
I.e,
someone's
joined,
a
chat
or
someone
sent
a
message
comes
from
web
chat.
Go
the
bot
is
handling
it
in
block
framework
and
then
send
it
effectively
relaying
that
activity
back
onto
teams,
and
likewise
it's
the
same.
The
other
way.
A
If
someone
mentions
the
bot
within
a
within
a
conversation
that
then
gets
handled
by
the
bot
and
then
relayed
back
through
to
the
web
chat
user
and
I'll
just
quickly
go
into
a
bit
more
detail
like
sort
of
how
it
all
works.
In
the
background,
we
have
a
user
joining
a
chat
that
creates
a
conversation
in
the
direct
line
channel
with
the
bot
services.
A
A
We
then
create
a
brand
new
conversation
in
teams.
We
create
a
chat
thread
in
teams.
We
store
that
chat,
thread
and
conversation
reference
in
cosmos.
So
at
that
point,
we've
kind
of
got
both
sides
of
the
same
conversation.
So
next
time
a
message
comes
through
from
one
channel.
We
know
the
other
end
of
the
conversation
who
what
the
other
channel
is
conversation,
references
and
then
effectively
it's
just
a
user
kind
of
responding
to
the
thread
from
from
either
side
really
and
then
I'll
quickly
go
through
some
of
the
code.
A
A
Certain
activities
happen
within
teams
or
within
web
chat.
So
the
first
one
is
the
the
on
installation
update.
So
that
is
effectively
when
the
web
chat
bot
gets
added
to
a
channel.
It
then
sends
an
adaptive
card
through
saying:
okay,
what
do
you
want
to
call
the
channel
in
the
web
chat?
And
that's
basically
what's
happening
here?
A
Then
we
have
an
on
message:
that's
a
standard
chat
message
coming
through
or
an
adaptive
card
from
webchat.
It's
it's
encoded
as
a
message
and
effectively
we're
just
kind
of
just
seeing.
If
it's
coming
from
web
chat
or
direct
line,
then
we
upset
the
web
chat,
conversation
into
cosmos
and
we
then
send
it
to
the
team
web
chat
teams
activity
handler
to
kind
of
do
whatever
it
needs
to
do
to
make
it
work
in
teams.
A
And,
conversely,
if
it's
coming
from
teams,
we
upload
the
teams,
conversation
into
cosmos
and
kind
of
link
them
together,
and
then
we
send
on
to
web
chat.
So
you
know
there's
certain
things
that
teams
will
send
to,
and
web
chat
doesn't
like
the
way
it's
sent,
and
likewise
things
coming
from
a
web
chat
that
we've
got
to
be
careful
with
the
way
teams
handle.
A
So
in
this
scenario,
we
are
using
an
onboard
invoke
activity
and
effectively.
What
we're
doing
here
is.
We
are
checking
that's
an
adaptive
card,
then,
depending
on
what
the
the
payload
is
in
the
car,
does
it
end
chat
or
is
it
adding
a
channel
to
a
web
chat?
So
you
know
when,
when
I
added
that
pre
sort
of
after
sales,
one
that
came
through
as
a
universal
action,
so
I
need
to
distinguish
what
is
actually
happening.
What
what
is
what's
come
from
teams
and
effectively
based
on
what?
A
Where
type
of
activity
is,
then
we're
handling
it
differently
and
because
it's
a
universal
action,
we
always
have
to
respond
with
an
adaptive
card
to
be
updated
in
the
in
the
original
source.
So
whatever
card
it
came
from,
we
have
to
then
send
a
response
to
what
that
card
needs
to
look
like,
so
we
are
using
that
for
when
we
enter
chat.
We
then
change
the
card
to
say
that
the
chat
has
now
ended.