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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.alohaa.ai/alohaa-docs/others/iframe-integration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.