8. Customer Self-Care User Interface (CSC UI)

There are two ways for end users to maintain their subscriber settings: via the Customer Self-Care Web Interface (old/Perl or new/JS versions) and via Vertical Service Codes using their SIP phones.

8.1. New (default) Vue.JS-based CSC UI

The Sipwise C5 has been migrated to the new Vue.JS-based CSC UI starting from mr6.4.1. It provides a list of new features, is also based on modern technologies and allows Sipwise to deliver all the modern features to end users including WebRTC calls and conferencing (available on commercial PRO/Carrier installations only).

The new CSC UI is technically a Single Page Application, that is fully client side rendered and builds on top of the NCGP REST API as part of a Service Oriented Architecture. The new CSC UI source code is published under a GPL license on https://github.com/sipwise/ngcp-csc-ui and can be used as an example for the customised CSC UI development if necessary (using the same REST API methods).

8.2. Old (deprecated) Perl-based CSC UI

You can reconfigure Sipwise C5 to use the old CSC UI using:

ngcpcfg set /etc/ngcp-config/config.yml www_admin.http_csc.csc_js_enable=no
ngcpcfg apply 'Use old and deprecated CSC UI'
info

it is impossible to have both new and old CSC UI enabled simultaneously.

8.3. The Customer Self-Care Web Interface

The Sipwise C5 provides a web panel for end users (CSC panel) to maintain their subscriber accounts, which is running on https://ngcp-ip. Every subscriber can log in there, change subscriber feature settings, view their call lists, retrieve voicemail messages and trigger calls using the click-to-dial feature.

8.3.1. Login Procedure

To log into the CSC panel, the end user has to provide his full web username (e.g. user1@1.2.3.4) and the "web password" defined in Section 6.3, “Creating a Subscriber”. Once logged in, he can change his web password in the Account section. This will NOT change his SIP password, so if you control the end user devices, you can auto-provision the SIP password into the device and keep it secret, and hand over the web password to the customer. This way, the end user will only be able to place calls with this auto-provisioned device and not with an arbitrary soft-phone, but can nonetheless manage his account via the CSC panel.

8.3.2. Site Customization

info

it is available on the old CSC UI only.

As an operator (as well as a Reseller), you can change the branding logo of the Customer Self-Care (CSC) panel and the available languages on the CSC panel. This is possible via the admin web interface.

8.3.2.1. Changing the Logo
info

it is available on the old CSC UI only.

For changing the branding logo on a reseller’s admin web page and on the CSC panel you need to access the web interface as Administrator and navigate to Reseller menu. Once there click on the Details button for your selected reseller, finally select Branding.

In order to do the same as Reseller, login on the admin web interface with the reseller’s web credentials, then access the Panel Branding menu.

The web panel customisation happens as follows:

  1. Press the Edit Branding button to start the customisation process.
  2. Press the Browse button to select an image for the new logo:

    CSC Customisation Step 1: Select an image

    Figure 69. CSC Customisation Step 1: Select an image


  3. Press the Save button to save changes.
  4. Select and copy the auto-generated CSS code from the text box below the uploaded image:

    CSC Customisation Step 2: Copy CSS code

    Figure 70. CSC Customisation Step 2: Copy CSS code


  5. Press the Edit Branding button again.
  6. Paste the CSS code into CSS text box and Save the changes:

    CSC Customisation Step 3: Paste CSS code

    Figure 71. CSC Customisation Step 3: Paste CSS code


  7. Now the new logo is already visible on the admin / CSC panel. If you want to hide the Sipwise copyright notice at the bottom of the web panels, add a line of CSS code as shown here:

    CSC Customisation: Hide copyright notice

    Figure 72. CSC Customisation: Hide copyright notice


  8. The final branding data is shown on the admin web panel:

    CSC Customisation: Custom data on panel

    Figure 73. CSC Customisation: Custom data on panel


8.3.2.2. Other Website Customisations
info

it is available on the old CSC UI only.

The layout and style of NGCP’s admin and CSC web panel is determined by a single CSS file: /usr/share/ngcp-panel/static/css/application.css

More complex changes, like replacing colour of some web panel components, is possible via the modification of the CSS file.

warning

Only experienced users with profound CSS knowledge are advised to change web panel properties in the main CSS file. Sipwise does not recommend and also does not support the modification of the main CSS file.

8.3.2.3. Selecting Available Languages

You can also enable/disable specific languages a user can choose from in the CSC panel. Currently, English (en), German (de), Italian (it), Spanish (es) and Russian (ru) are supported, and the default language is the same as the browser’s preferred one.

You can select the default language provided by CSC by changing the parameter www_admin.force_language in /etc/ngcp-config/config.yml file. An example to set the English language as default:

ngcpcfg set /etc/ngcp-config/config.yml www_admin.force_language=en
ngcpcfg apply 'Set English as default on CSC'

8.4. The Voicemail Menu

Sipwise C5 offers several ways to access the Voicemail box.

The CSC panel allows your users to listen to voicemail messages from the web browser, delete them and call back the user who left the voice message. User can setup voicemail forwarding to the external email and the PIN code needed to access the voicebox from any telephone also from the CSC panel.

To manage the voice messages from SIP phone: dial internal voicemail access number 2000.

To change the access number: look for the parameter voicemail_number in /etc/ngcp-config/config.yml in the section semsvsc. After the changes, execute ngcpcfg apply 'changed voicebox number'.

tip

To let the callers leave a voice message when user is not available he should enable Call Forward to Voicebox. The Call Forward can be provisioned from the CSC panel as well as by dialing Call Forward VSC with the voicemail number. E.g. when parameter voicemail_number is set to 9999, a Call Forward on Not Available to the Voicebox is set if the user dials *93*9999. As a result, all calls will be redirected to the Voicebox if SIP phone is not registered.

To manage the voice messages from any phone:

  • As an operator, you can setup some DID number as external voicemail access number: for that, you should add a special rewrite rule (Inbound Rewrite Rule for Callee, see Section 6.7, “Configuring Rewrite Rule Sets”.) on the incoming peer, to rewrite that DID to "voiceboxpass". Now when user calls this number the call will be forwarded to the voicemail server and he will be prompted for mailbox and password. The mailbox is the full E.164 number of the subscriber account and the password is the PIN set in the CSC panel.
  • The user can also dial his own number from PSTN, if he setup Call Forward on Not Available to the Voicebox, and when reaching the voicemail server he can interrupt the "user is unavailable" message by pressing * key and then be prompted for the PIN. After entering PIN and confirming with # key he will enter own voicemail menu. PIN is random by default and must be kept secret for that reason.

8.5. Company Hours

info

it is available on the new CSC UI only.

The subsection "Company Hours" under the CSC UI "Call Forward" allows the user to specify Call Forwarding Rules for a specific period of time. The time defined in this subsection represents the office hours of the company. The first step is to define the actual days and the according times. Each time entry consists of day, start-time, and end-time. You can define multiple times for the same day, to get a different behavior with the breaks and the office hours. If the current times are not in one of the defined periods, the system falls back to the subsection "Always". Specific dates or date ranges can not be defined. The functionality is limited to weekdays and its timing.

The feature "Company Hours" is a virtual Sipwise C5 function which is based on Sipwise C5 core functionality Subscribers "Unconditional Call Forwarding" which is enhanced with the "Time sets" and "Sounds set" to achieve the necessary functionality.

The feature "Company Hours" can be managed using REST API methods CFDestinationSet, CFMapping, CFSourceSet and CFTimeSet. Please check all available options for those methods in a public REST API documentation.