Set-up a new mobile/web app asset

To leverage our SDKs within your application, you must first create an app asset within the Webex Connect platform. The asset configuration determines which SDK features are enabled and available for you to use.

When an app asset is configured the platform will assign an App ID and Client Key. These credentials must be provided to the SDK by your app and form part of the authentication process with the Webex Connect platform.

🚧

Important!

For enhanced security you should consider implementing JWT authentication.

In order to send push notifications or in-app messages to your app, the asset must be mapped to a service.

📘

Note

Your account administrator should have been provided a URL to the Webex Connect Portal, this URL is unique to your account. If you do not have your account URL, please contact your account administrator.

1. Create a Mobile App Asset in Webex Connect
2. Create a Web App Asset in Webex Connect

Create a Mobile App Asset in Webex Connect

1. Login to your Webex Connect Portal account using your unique account URL.
2. From the menu bar, go to Assets, and click Apps as shown below.

3. Click CONFIGURE NEW APP > Mobile / Web.

4. In the app configuration screen, enter a name for your app and make a note of CLIENT KEY provided within the Access Credentials section.

5. Within the Push Notifications section, hover over the Platform Type and click Configure to configure OS-specific Push Notification settings.

📘

Note

The information required to configure each platform will vary as it is specific to each platform, but for the sake of this tutorial we will configure push notifications for the Android platform.

Configure Firebase Keys for Android Push Notifications

Android Push Notifications

In the pop-up that appears, provide the FCM Server key and, if supporting Huawei HMS, the Huawei App Id and Secret.
For instructions on where to obtain these pieces of information please refer to Capture the Firebase Server Key and Capture the Huawei App Id and App Secret

Copy the code snippet provided in the 'PERMISSIONS' section and paste it in your manifest.xml file.

iOS Push Notifications

In the pop-up that appears, if you want to use APNS as the Push Notification gateway, provide the Certificate Password, select the gateway type of your APNS project, and provide the certificate file to complete your configuration process. Alternatively, you can use FCM as a gateway. The configurations to use FCM for iOS push notifications is the same as that of Android.

📘

Supported Certificate Format

Currently, .p12 is the only certificate format supported.

Enable In-App Messaging

1. Enable In-App messaging and select the primary and secondary connection protocol from the select list

📘

Note

Two transport protocols are available for establishing an In-App Messaging connection with imiconnect - Web Socket and MQTT. You can configure them as primary and secondary. If a connection fails to establish on the primary protocol, it falls back to the secondary protocol.

2. For an end-to-end encrypted messaging service, you must select both the check-boxes (Use Secured Port and Enable Payload Encryption) as shown in the image.

Enable Device Monitoring

📘

Note:

This feature is optional.

1. To monitor device attributes, like IMEI No., Geo-Location, etc, enable Device Attributes and click Configure as shown below.

2. In the pop-up that appears, select the device attributes you wish to monitor.
3. Next, define the monitoring frequency by selecting an interval from the select-list available.
4. Now copy the code snippet available in the 'PERMISSIONS' section and paste it in your manifest.xml file in case of Android or plist file in case of iOS.

5. If you want to authorize all communications over in-app messaging, you can do so by enabling JWT Authorization. Once enabled, you'll need to provide the JWT secret key that will be used for validation.

📘

NOTE

To enable JWT authentication for Thread, Topic, and Segment APIs, please reach out to the support team, once you have enabled the above configuration.

6. By default the Allow Multi User Registrations on Same Device is enabled. If you do not need this feature you can disable this.

📘

Note

"Multi-User Registration allows you to have multiple users registered from a single device at the same time. This will ensure that push notification sent to any of the registered user will be delivered on the device. However if the notification is sent to all the users registered on a device paralelly, you would see duplicate push notifications on that given device "

7. Finally, click on SAVE to complete your app asset creation process and hit the back button, to land on the apps page. You can now see your app listed with an App-ID.

You'll have to embed this APP ID in your app code. You can learn more about it in Quickstart guides available in each SDK documentation.

To configure a project, visit Project Setup

Create a Web App Asset in Webex Connect

To add a web application in Webex Connect, follow these steps:

1. From the menu bar, go to Assets, and click Apps .
2. Click CONFIGURE NEW APP > MOBILE / WEB.

3. Enter the application name and click NEXT.
4. Select the Web platform and click NEXT. Based on the selected platform, supported browsers screen appears.

5. Select browser and click NEXT. The app configuration screen appears.
6. Enter the following fields to configure Chrome and Firefox browsers:
   a. Website URL: Enter the URL of the website to configure Web Push notification.
   b. Notification Icon: Enter the path of the notification icon. The size of the icon should be 80x80.
   c. FCM Server Key: Enter the FCM Server Key generated from this section Setup FCM for Chrome and Firefox Browsers
   d. Firebase SDK Snippet: Enter the Firebase SDK Snippet generated in the section Setup FCM for Chrome and Firefox Browsers
   e. Click Save.

7. Enter the following fields to configure Safari browser:
   a. Site Name: The name that is entered is displayed on the notification.
   b. Site URL: The URL that is used to validate the identity of the website requesting push notifications using your ID. Only the website that matches the URL can use your Webex Connect ID for push notifications.
   c. Notification Icons: It is mandatory to upload all five icons. Click the respective buttons to upload the icons.
   d. APNS Credentials: Enter the password that is set while generating the certificate in the section Setup APNS for Safari Browser. Leave this field blank if the certificate was generated without a password.
   e. Upload the .p12 certificate .
   e. Click Save.

8. Configure Live Chat / In-App Messaging's Transport and Security settings.

9. Click Save.

A confirmation message appears when the application is created successfully.

Download and Integrate JavaScript SDK

1. When the web app is added successfully, you can notice a DOWNLOAD link under Web configuration section. Click the link to download the JavaScript SDK.

2. Extract the zip file, to a location on your local computer. You will notice js, manifest folders and sw.js file.
3. Copy sw.js file, js, and manifest folder to the root folder of your web application.
4. To request web push permission, the user should be registered. Once the user is registered, the JS SDK will automatically request permission to send notifications. Please refer to the section Web-Push-Popup for sample codes and add them into your .html file.