Skip to content

Adding actions to the giosg visitor chat client

Adding actions to the giosg visitor chat client

Introduction

In this tutorial we will guide you through the process of adding code snippets to be executed when the giosg visitor chat client fires events. You will need to include the giosg script to your webpage to be able to use these snippets.

We have the following actions available to listen to:

Events

Chat

Room join

Note

This event fires every time a visitor is invited into a different room and joins it.

The following snippet will be executed every time the visitor joins a room.

1
2
3
4
5
<script type="text/javascript">
    window.giosg.on("room:join", () => {
        // 
    })
</script>
Room leave

Note

This event fires every time a visitor leaves a room.

The following snippet will be executed every time the visitor leaves a room.

1
2
3
4
5
<script type="text/javascript">
    window.giosg.on("room:leave", () => {
        // 
    })
</script>
Chat is being opened

The following snippet will be executed every time the chat window is opened.

1
2
3
4
5
<script type="text/javascript">
    window.giosg.on("chatwindow:open", () => {
        // Add your code to be executed before the chat window is opened.
    })
</script>
Chat is being closed

The following snippet will be executed every time the chat window is closed.

1
2
3
4
5
<script type="text/javascript">
    window.giosg.on("chatwindow:close", () => {
        // Add your code to be executed before the chat window is closed.
    })
</script>
Chat Button Clicked

The following snippet will be executed every time the giosg chat button is clicked.

1
2
3
4
5
6
<script type="text/javascript">
    window.giosg.on("chatbutton:click", (event, element) => {
        // event is the Event that triggered;
        // element is the identifier of the element clicked.
    })
</script>
Message received

The following snippet will be executed every time a visitor receives a message.

1
2
3
4
<script type="text/javascript">
    window.giosg.on("message:receive", () => {
    })
</script>
Message send

The following snippet will be executed every time the visitor sends a message.

1
2
3
4
5
6
<script type="text/javascript">
    window.giosg.on("message:send", (message) => {
        // Message has multiple sub-items available:
        // Most interesting parts are: message.msg, message.roomName, message.roomTitle.
    })
</script>
Active chat (Changed)

The following snippet will be executed when the active chat changes.

1
2
3
4
5
<script type="text/javascript">
    window.giosg.on("active_chat:changed", (activeChatEvent) => {
        // 
    })
</script>
Active chat (Get)

The following snippet will be executed when the active chat is selected.

1
2
3
4
5
<script type="text/javascript">
    window.giosg.on("active_chat:get", (activeChatEvent) => {
        // 
    })
</script>
Chat Textarea Focused

The following snippet will be executed when the chat textarea is focused by the visitor.

1
2
3
4
<script type="text/javascript">
    window.giosg.on("chat_textarea_focused", () => {
    })
</script>

Calls

Call initiated

The following snippet will be executed every time a call is initiated.

1
2
3
4
5
<script type="text/javascript">
    window.giosg.on("call-initialized", (started) => {
        // Started is a boolean that returns whether the call is initiated.
    })
</script>
Call answered

The following snippet will be executed every time a call has been answered.

1
2
3
4
<script type="text/javascript">
    window.giosg.on("call-answered", () => {
    })
</script>
Call declined

The following snippet will be executed every time a call has been declined.

1
2
3
4
<script type="text/javascript">
    window.giosg.on("call-declined", () => {
    })
</script>
Call audio started

The following snippet will be executed when the audio has started between visitor and user.

1
2
3
4
5
<script type="text/javascript">
    window.giosg.on("call-audio-enabled", (started) => {
        // started is a boolean, whether the audio has been en- or disabled.
    })
</script>
Call video started

The following snippet will be executed when video has started between visitor and user.

1
2
3
4
5
<script type="text/javascript">
    window.giosg.on("call-video-enabled", (started) => {
        // started is a boolean, whether the video has been en- or disabled.
    })
</script>
Call ended

The following snippet will be executed when the active call is ended by either visitor or user.

1
2
3
4
<script type="text/javascript">
    window.giosg.on("call-ended", () => {
    })
</script>
Call states

The following snippet will be executed when the call has started initializing and contains the state of the call.

1
2
3
4
5
6
7
<script type="text/javascript">
    window.giosg.on("call-state", (callState) => {
        // Call State contains the following:
        // name, avatar, audio_enabled and video_enabled
        // and type: 'idle' | 'ringing' | 'initializing' | 'dialing' | 'in-call'
    })
</script>

Cobrowse

Cobrowse started

The following snippet will be executed when cobrowse has started.

1
2
3
4
<script type="text/javascript">
    window.giosg.on("cobrowse-started", () => {
    })
</script>
Cobrowse ended

The following snippet will be executed when cobrowse has ended.

1
2
3
4
<script type="text/javascript">
    window.giosg.on("cobrowse-ended", () => {
    })
</script>
Cobrowse declined

The following snippet will be executed when cobrowse has declined.

1
2
3
4
<script type="text/javascript">
    window.giosg.on("cobrowse-declined", () => {
    })
</script>

User

User presences

The following snippet will be executed every time the user & room information changes.

1
2
3
4
5
6
<script type="text/javascript">
    window.giosg.on("operatorpresence", (room, is_online) => {
        // Room is the room ID to which the chat is currently connected to;
        // is_online is a boolean.
    })
</script>
Online user count changes

The following snippet will be executed every time a user changes state in giosg console.

1
2
3
4
5
6
<script type="text/javascript">
    window.giosg.on("onlineoperators:change", (count) => {
        // Count returns an object that has the following items:
        // onlineCount: amount of users online, room.
    })
</script>
Online user details

The following snippet will be executed every time a user changes state in giosg console.

1
2
3
4
5
6
<script type="text/javascript">
    window.giosg.on("onlineoperators", (state) => {
        // state returns an object that has the following items:
        // State: on or offline, a list of users (name), and the room.
    })
</script>

Visitor

Visitor is active

The following snippet will be executed every time the visitor comes out of idle.

1
2
3
4
<script type="text/javascript">
    window.giosg.on("visitor:active", () => {
    })
</script>
Visitor is idle

The following snippet will be executed every time idles out.

1
2
3
4
<script type="text/javascript">
    window.giosg.on("visitor:idle", () => {
    })
</script>

Conclusion

You have now learnt how to add code snippets to our page, to be executed every time one of those events fires.