Skip to main content

Quick Start

Setup Ytel Webphone Widget in your website in 5 minutes.

Installation​

Include the following two lines before the tag

<link rel="stylesheet" type="text/css" href="https://webphone-widget.ytel.com/ytel-webphone-latest.min.css">  
<script src="https://webphone-widget.ytel.com/ytel-webphone-latest.min.js"></script>

Optional​

You can make Ytel webphone drawer push your main UI to the side when it's open, so it doesn't block your contents by wrapping your main UI with element has an ID wrapper.

Usage​

Full Options​

const config = {
  username: 'username',
  password: 'password',
  wrapperId: 'wrapper-main',
  options: {
    autoDTMFInbound: '1112', // Optional, for enforcing auto DTMF on inbound calls
    autoDTMFOutbound: '211', // Optional, for enforcing auto DTMF on outbound calls
  },
  env: 'qa',
  features: {
    phone: true,
    video: true,
    sms: false,
    contacts: true,
    numberLoader: false,
    liveList: false,
    agentsStatus: false,
    voicemail: false,
    recentConversations: false,
    workflow: false,
  },
};

YtelWebphone.init(config);

As defined in that sample, the following parameters can be configured:

  • username: String. Contains the Ytel account username.
  • password: String. Contains the Ytel account password.
  • wrapperId: String. Contains the ID of the element that wraps the main UI. This is used to push the main UI to the side when the drawer is open.
  • options: Object. Contains the options for the webphone.
    • autoDTMFInbound: String. Contains the DTMF to send when an inbound call is answered. Default value is empty.
    • autoDTMFOutbound: String. Contains the DTMF to send when an outbound call is answered. Default value is empty.
    • defaultOpenMainDialer: Boolean. True for opening the main dialer when the webphone is initialized. Default value is true.

Methods

YtelWebphone.init(config);
  • init(config): Initializes the webphone.
  • call(e164): Calls the specified phone number.
  • openWebphone(isOpen): Opens or closes the webphone drawer.
  • isRegistered(): Returns true if the webphone is registered.
  • isReady(): Returns true if the webphone is ready.
  • isInboundOnly(): Returns true if the webphone is inbound only.
  • getPhoneStatus(): Returns the phone status.
  • setPhoneStatus(status): Sets the phone status. Allowed status: online, offline, outbound_only