iFrame Integration

Overview:

The Alohaa iframe Widget allows seamless integration of Alohaa's call center functionality into any web application. This document provides the necessary steps to implement and use the widget, from the perspective of a developer, organization admin, & agent.

For Developer:

To embed the Alohaa iframe widget, use the URL:

https://widgets.alohaa.ai/

Here's how the code should look like:

<iframe 
    id="alohaa-dialer"
    title="alohaa dialer"
    frameBorder="0"
    borderRadius="20px"
    width="320"
    height="444"
    allow="microphone"
    src= "https://widgets.alohaa.ai/"
  >
  </iframe>

Points to Note:

• Global Context: Ensure the iframe is placed in a global context so that the dialer loads only once globally and doesn't reload at every page change.

• Microphone Access: Users must grant microphone access to enable WebRTC calls (Browser based calls). The client must include the necessary permissions on the iframe to allow microphone access.

Dynamic Variable:

You can pass on the phone number directly to the widget through code. Here's how the code should look like:

const phoneNumber = "XXXXXXXXXX"; // Fetch the phone number
const iframe = document.getElementById("alohaa-dialer");

iframe.onload = function() { 
  iframe.contentWindow.postMessage(
    { 
      action: "setPhoneNumber",       // Mandatory: Set the phone number
      phoneNumber: "8919759487",      // Mandatory: 10-digit number to dial
      edit: false,                    // Optional: Whether user can edit inside iframe
      encrypt: true,                  // Optional: Encrypt number, only last 4 digits visible
      uniqueId: "sohdinvs733882-wihzxjoxjs-usndjdi83" // Optional: String value used to uniquely identify the request. 
                                                     // This will be returned in webhook as external_id.
    }, 
    "*"
  );
};

Parameter	Description	Required
action	For setting a phone number, use "setPhoneNumber".	Mandatory
phoneNumber	The 10-digit number to be dialed or shown inside the iframe dialer.	Mandatory
edit	Whether the user can manually edit the phone number inside the iframe: • true: phone number field is editable • false: field is locked	Optional
encrypt	Whether the phone number should be encrypted before being sent to the iframe logic: • true: phone number is encrypted with only last 4 digits visible • false: sent as visible number	Optional
uniqueId	A string value used to uniquely identify the request. This ID will be returned in the external_id field of the webhook callback for traceability.	Optional

For Admin:

Agent creation is a one-time process and should be done from the Alohaa’s admin portal. Please follow these steps:

1. Log in to the Alohaa’s admin portal.

2. Navigate to the 'Agents' section.

3. Click 'Create Agent' and fill in the required details.

4. Save the agent information and ensure the agent account gets activated.

For Agent:

Logging In:

1. Open the web application containing the Alohaa iframe widget.

2. Enter the Alohaa agent ID and credentials in the login form within the iframe.

3. Click 'Login' and enter the “OTP” to access the dialer.

Making Calls:

1. Use the contact center functionalities provided within the iframe to make and receive calls.

2. Ensure the microphone access is granted to enable WebRTC calls (Browser based).

Logging Out:

1. Click the 'Logout' button within the iframe to end the session.

2. The iframe will return to the login screen for the next user.

Support:

If you need any assistance, please contact [email protected].