> For the complete documentation index, see [llms.txt](https://docs.alohaa.ai/alohaa-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.alohaa.ai/alohaa-docs/others/iframe-integration.md).

# 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>
```

{% hint style="info" %}

#### 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.
  {% endhint %}

## Dynamic Variable:

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

```javascript
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.
    }, 
    "*"
  );
};

```

##

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

## 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](https://business.alohaa.ai/).
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:

<figure><img src="/files/EfpiGvn4edC7qN12nftQ" alt=""><figcaption></figcaption></figure>

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:

<figure><img src="/files/vLWAqvaDVvDyGnIYwSSu" alt=""><figcaption></figcaption></figure>

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:

<figure><img src="/files/AyS1fTMRn2o3AhLTcDjD" alt=""><figcaption></figcaption></figure>

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 <support@alohaa.ai>.