Ziwo Core Front

Provides a Ziwo Client to perform call

Online documentation: http://doc-core-front.ziwo.tech/

Get started

Take time to read the following links:

1. Usage section of this file
2. Events section of this file
3. Ziwo Client class http://doc-core-front.ziwo.tech/classes/ziwoclient.html
4. Call class http://doc-core-front.ziwo.tech/classes/call.html
5. Event's details: http://doc-core-front.ziwo.tech/classes/ziwoevent.html)

Usage

You can easily instanciate a Ziwo Client:

ziwoClient = new ziwoCoreFront.ZiwoClient({
    autoConnect: true, // Automatically connect agent to contact center. Default is true
    contactCenterName: 'your-contact-center-name', // Contact center you are trying to connect to
    credentials: { // User's credentials. You can either send an authentication token or directly the user's credentials
        authenticationToken: 'token_returned_on_login_action',
        //// If you don't have an authentication token, simply provide user's credentials
        // email: 'toto@hello.org',
        // password: 'verysecretpassword',
    },
    tags: { // HTML tags of <video> elements available in your DOM
        selfTag: document.getElementById('self-video'), // `selfTag` is not required if you don't use video
        peerTag: document.getElementById('peer-video'), // `peerTag` is mandatory. It is used to bind the incoming stream (audio or video)
    },
    debug: true, // Will provide additional logs as well as displaying incoming/outgoing Verto messages
});

If you disabled the auto connect in the option, make sure to call connect() before anything else.

Now, you can use the only function available in the Ziwo Client : startCall

ziwoClient.startCall('+3364208xxxx');

Everything else is managed through the events.

Events

The events emitted by Ziwo will allow you to perform many actions. Each event holds a Call instance that you can use to change the status of the call.

See below the list of events:

Events	Description
error	Something wrong happened. See details for further information
connected	User has been successfully authenticated
disconnected	User has been disconnected
requesting	Requesting operator to make the call
trying	Operator trying to make the call
early	Call is waiting for customer to pick up
ringing	Call is ringing agent phone
answering	Agent is answering call
active	Agent and customer can talk to each other
held	Customer has been put on hold by the Agent
hangup	Call is being hanged up
mute	Call has been muted by the agent
unmute	Call has been unmuted by the agent
destroy	Call is destroying
recovering	When reconnecting to virtual phone and a call wasn't over, it automatically recovers it

For retro-compability reason, events are emitted with 2 formats:

• jorel-dialog-state-{EVENT_NAME} (ex: jorel-dialog-state-held)
• ziwo-{EVENT_NAME} (ex: ziwo-held)

You can use addEventListener to listen for ziwo event. Here is how you could simply answer an incoming call.

// Automatically answer incoming call
window.addEventListener('ziwo-ringing', (ev) => {
    // ev holds an instance of the Call in its details
    ev.details.call.answer();
});

Read http://doc-core-front.ziwo.tech/classes/ziwoevent.html) for more details

Commands

Command	Description
build	Build the library into /dist
start	Start the library in watch mode
start:app	Start the demo application
start:app:port	Start the demo application on a specific port. Usage: $ PORT=1818 npm run start:app:port
lint	Run tslint
test	Run the unit tests
test:coverage	Display a test coverage report
doc	Build the documentation
open:doc	Open the documentation

Contributing

1. Fork it (https://github.com/ASWATFZLLC/ziwo-core-front/fork)
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create a new Pull Request

Coding standards

Styles

DO:

1. Use 2 space per indentation
2. Use Single Quote only '
3. Surround loop and conditional bodies with curly braces. Statements on same line are allow to omit braces
4. Commas ,, colons : and semi-colons ; are followed by a single space
5. End of statement must be followed by semi-colons ;

DO NOT:

1. Do not use var to declare variable. Instead use const or let
2. Do not use <type>myVar for casting. Instead use as keyword
3. Do not declare multiple variables with a single variable statement (let x = 1, y = 2 is forbidden)
4. Do not use anonymous functions. Instead use arrow functions
5. Do not include white spaces in import

Files & Declaration

DO:

1. 1 file per logical component

DO NOT: 2. Do not export type/functions/interface/class unless you need to share it across multiple components

Names

DO:

1. Use PascalCase for type names
2. Use PascalCase for enum values
3. Use camelCase for function names
4. Use camelCase for property name and local variables
5. Use whole words when possible. One letter variable names are only allowed in arrow functions

DO NOT:

1. Do not use _ for private properties
2. Do not use I as a prefix for interface names

Types

DO:

1. Variable must all be typed. Type may be omitted if the variable is assigned in the same statement
2. Function must all have a return type (even void)

DO NOT:

1. Do not use anonymous types. Instead use Interface
2. Do not use 'x'|'y' as type. Instead use Enum
3. Do not include white space before nor after semicolor of type definition
4. Avoid using type any

Classes

DO:

1. Always add function visibility (public/private/protected)
2. Always add property visibility (public/private/protected)
3. Break the constructor into multiple line in order to keep 1 injection per line
4. Declare all the properties before the constructor
5. Declare all the functions after the constructor
6. Public properties must be declared before private ones
7. Public functions must be declared before private ones