Installing Rox.Chat on a Website in an iframe

To embed the Rox.Chat service chat window in an iframe on a website, you need to:

Configure nginx. You can read more about this in this article.
Add interface elements to the site:
- A container holding the iframe where the chat widget will be placed <iframe id="spitch-chat-iframe" style="border: none">. The element must have the id rox-chat-iframe and an undefined src attribute (filled in by the script). The container should be hidden when the page loads.
- A chat start button, which should also be hidden when the page loads. Clicking the button should call roxchat.api.chat.start().
- A chat close button, which is expected to hide and show along with the chat widget. Clicking the button should call roxchat.api.chat.close().
Add a configuration JavaScript object to the page:
```
roxchat = {
    accountName: "account_name",
    domain: "account_name.rox.chat",
    location: "location_name",
};
```
accountName — the account name in Rox.Chat:
- For cloud clients, accountName is included in a domain of the form <accountname>.rox.chat, which the client uses for authorization. For example, in the domain mycompany.rox.chat, the account domain will be mycompany.
- For hosted clients, accountName is the value of the corresponding parameter in the main.ini file. mysitecom can serve as a default accountName example.
domain — the client's account domain in Rox.Chat:
- For cloud clients, the domain looks like<accountname>.rox.chat. Example: mycompany.rox.chat.
- For hosted clients, the domain can have any form. Example: chat.company.com.
location — the client account's location in Rox.Chat. It is not mandatory.
If necessary, add a roxchat_visitor object according to the documentation.

Implement event handlers:

roxChatHandlers = {

onInit: function (event) {
  // receives an object {online: true/false, onlineStatus: 'online'/'busy_online'/'offline'/'busy_offline'}
  // here you should initialize the appearance of the chat start button depending on the status and make it visible
},

onChatShownStateChanged: function (event) {
  // receives an object {shown: }
  // is called when it is necessary to hide/show the chat widget, this can happen both in response to user actions,
  // and to incoming information from the server (for example, when the agent reopened the chat closed by the visitor)
  // here you should show/hide the container with the iframe
},

onChatReadChanged: function (event) {
  // receives an object {read: }
  // is called when the chat read status by the visitor changes
  // here you should turn on/off the visual signal of unread status, for example, "flashing" the page title
},

onTeleport: function (event) {
  // receives an object {url: 'https://...'}
  // is called when the agent used the "Teleport" function - redirecting the visitor to a specified page
  // the standard solution here is to execute:
  // window.location.href = event.url;
},

onProvidedTokenNotFoundError: function () {
  // not used with iframe, but can be used in other cases (regular chat widget or mobile application)
  // is called when the auth_token is not found (handles the event of an error coming from the **Rox.Chat** server 'provided-auth-token-not-found' (see **Rox.Chat** Realtime API))
  // in case of absence of auth_token, the handler should initiate a re-sending of the POST request to **Rox.Chat** from the organization's backend
};

You need to add a call to roxchat.api.init() after the full page load.
Connect a copy of the script https://<account_name>.rox.chat/spitchat/js/v/iframe-helper.js. Using the Iframe Helper is not mandatory. You can perform the necessary transformations in your code. To support user authorization and logout without reloading the website page, it is necessary to update the roxchat_visitor object (assign null when logging out) and make a call to roxchat.api.onProvidedVisitorChanged(). You can see a working prototype at the link https://<account_name>.rox.chat/spitchat/iframe-sample.php, where <account_name> is the name of your Rox.Chat account. You can open such a page for any account by specifying the necessary domain name in the URL.
If necessary, you can activate the passthrough_last_visitor_activity_from_iframe parameter in account-config - this will allow you to pass through events about actions performed by the client (such as user authorization) from the iframe chat to the main window of the client's site.