How to build a Genesys Cloud Customer Callback request form for your website
Seamlessly Schedule Callbacks with Node.js and Genesys Cloud API
Introduction:
In today’s digital landscape, providing seamless interactions on websites significantly enhances user experience. At QVCCS, we've implemented a sophisticated system that allows visitors to effortlessly schedule callbacks from the customer services team at their leisure, for a time and date that best suits them, directly from the enterprise website or portal whilst harnessing the power of the website, a downstream implementation of Node.js/Express that are integrated with the Genesys Cloud API schema.
Scenario:
The challenge was to enable an intuitive feature for users to schedule callbacks without navigating away from our website. This required a robust solution that could handle complex data interactions seamlessly and ensure data security. The callback request form should only be accessible to online 'logged in' users, and the online form should surface zero information about the integration, the clientID or SECRET for the API, whilst preventing potential customer abuse by rate limiting the number of requests that may be made by the customer at any time.
Solution:
Our approach was to develop a middleware backend that could efficiently manage request routing and data handling. We utilized Node.js for its server-side capabilities, with Express to streamline the routing processes. For callback management, we integrated the Genesys Cloud API, ensuring that every user interaction was processed effectively. To complement the backend, we designed a responsive frontend interface that adapts to user device preferences, ensuring a smooth scheduling experience. The solution is therefore made up up the following key building blocks.
Technical Requirements and Components:
- The Apache2 based httpd which is surfacing the customer facing website and portal, which exposes a callback booking request form to capture basic details of the callback (the frontend)
- Node.js and Express: Utilized for creating and managing the server infrastructure. (The middleware)
- Genesys Cloud API: Employed to handle intricate callback requests. (The backend)
- HTML/CSS/JavaScript: Applied in designing a responsive and intuitive client-side interface at the frontend so the functionality would work seamlessly on mobile devices, tablets and desktop PC's/Laptops.
Implementation Steps:
Configure OAuth Client Credentials in Genesys Cloud:
Setting up OAuth client credentials is critical for allowing the application to interact with Genesys Cloud. This process involves accessing the Genesys Cloud platform to create an OAuth client, which will authenticate our application without a traditional user login. By selecting "Client Credentials" as the grant type and assigning the necessary roles, we enable our application to perform scheduled callbacks securely.
- Navigate to the Genesys Cloud platform:
- Go to Admin -> Integrations -> OAuth.
- Create a new OAuth client with "Client Credentials" grant type and assign necessary roles.
- Save the "Client Id" and "Client Secret".
Setting Up Environment and Dependencies:
The foundation of our application is set up by installing Node.js and relevant packages such as Express, which will handle server requests, and body-parser for parsing incoming request bodies. Using dotenv, we manage environment variables that store sensitive information, including API keys and credentials securely.
Create Express Server Setup:
Our 'middleware' server acts as the backbone of the application, handling the receipt of form submissions via a POST routine, routing and the presentation of API requests to the Genesys Cloud API/v2 schema. It's configured to respond to specific routes and use middleware for tasks like parsing JSON data and handling cross-origin requests to ensure our application can communicate effectively between different secured domains.
- Basic server setup with routing and middleware:
Implement SSL/TLS with Certbot:
Security is paramount, especially when dealing with personal data and secure communications. We use Certbot to obtain SSL/TLS certificates, ensuring that all data transferred between our users and the server is encrypted. This setup involves generating certificates and configuring our server to serve content over HTTPS, thus safeguarding our application against potential intercepts.
- Using Certbot to generate SSL certificates and configuring the Express server to use HTTPS:
- Set up HTTPS server:
Develop the Client-Side Interface:
The user interface is designed to be clean and intuitive, allowing users to enter their details and schedule callbacks without hassle. We ensure that the interface is responsive, meaning it adjusts seamlessly across different devices and screen sizes, enhancing user interaction and accessibility.
- Frontend JavaScript to handle form submission:
Backend API Integration with Genesys Cloud:
With the backend setup complete, we integrate with the Genesys Cloud API using the configured OAuth credentials. This integration allows our server to manage callback requests effectively, leveraging the robust capabilities of Genesys Cloud to handle scheduling logic, user data processing, and response management.
- Handling POST requests in Express to interact with Genesys Cloud API:
Rate Limiting for Enhanced Security:
To maintain the integrity and reliability of our service, we implement rate limiting. This prevents abuse by limiting the number of requests a user can make to our server within a set period. It’s crucial for protecting our services from potential denial-of-service attacks or other types of abuse that could disrupt operation. To further enhance this, the web based callback form is only made visible to logged in customers, which improves the mapping of contacts from our online portal into the external contacts functionality in Genesys Cloud, thereby getting a better view of the customer journey in Genesys Cloud with the callback request in all other channels and media supported in the contact centre.
Conclusion:
With this setup, we at QVCCS have developed a callback system that is not only user-friendly but also robust and secure. It highlights the versatility of web technologies like Node.js and APIs like Genesys Cloud in enhancing customer service experiences.