Installing on Your Website and Guest Link

This page explains three ways to put Mira in front of your guests: a chat bubble embedded in your website, a shareable Guest Link, and QR codes placed in rooms. You do not need to be a programmer; if you can paste one line of code into your website (or hand this page to the person who does), that is enough. You get the code and links from the Widget page.

Which method should I choose?#

You can use all three together. They all connect to the same Mira and the same information.

Step by step: adding the widget to your website#

Example scenario: "Blue Bay Hotel" (30 rooms) wants a chat bubble at the bottom right of every page of its website.

1. Copy the code#

1. Open Widget in the panel.
2. In the Website Widget box, choose the Position (for example Bottom right) and press Save.
3. Press Copy Code. A line like this is copied to your clipboard:

<script async src="https://app.airoomier.com/widget.js" data-hotel="blue-bay-hotel"></script>

The data-hotel value is your business's own identifier (the part after /assistant/ in your guest link). Copy the code from the panel, do not type it by hand; the address and identifier must be exactly right.

2. Paste the code into your site#

The code must sit right before the closing </body> tag of the page. If you want the widget on every page, put the code in a place shared by all pages (your site's footer template). Add the code only once; if you add it several times, several bubbles appear.

On your own HTML site: open the file, find the </body> line and paste the code just above it.

WordPress: the general approach is to add the code to a "footer script" area that is published on every page of the site. This is usually done with a "header/footer script" plugin, or by adding the code before </body> in your theme's footer.php. If you paste it into a "Custom HTML" block inside a page, the widget only appears on that page. A visual editor can break the code; use the code/HTML mode.

Site builders such as Wix, Squarespace, Shopify: all of these have a place in the site settings, under names like "custom code", "code injection" or "theme code", where you can add code to the end of the page (footer / body end). Menu names vary by platform and over time; search the platform's help pages for "custom code" or "code injection". On some platforms this feature needs a paid plan. On Shopify you usually add the code in the theme file theme.liquid, before </body>.

If you work with an agency or developer: tell them "Add this <script> line before </body> on all pages of the site."

3. Publish and refresh#

Publish the change on your site. If your site has a caching plugin or CDN, clear the cache, then hard-refresh the page (Ctrl+F5, or open it in a private tab on your phone).

4. Test it#

1. Open your site in a private/incognito window.
2. After about 1.5 seconds, a round Mira bubble (or your own assistant photo on Pro) and a greeting bubble above it should appear in the corner you chose.
3. Click the bubble. For a brief moment three small dots (a loading indicator) appear in the middle of the panel, then the chat fades in smoothly. A Terms & Conditions window appears the first time; continue with Accept & Continue.
4. Ask questions like "What time is check-in?" or "Do you accept pets?". The answers should match what you wrote in Business Info.
5. Open it on your phone too: if the screen is narrow (about 520 pixels or less), the chat opens full screen.

5. (Optional) Turn on domain security#

Your code is publicly visible in your site's source; if someone copies it onto their own site, your assistant and your AI conversation quota are used there. To prevent this:

1. Once the widget works on your site, open the Widget → Domain Security box.
2. Type your site's domain in the Allowed domains box, e.g. bluebayhotel.com (one domain per line; you do not need to write https://, a path or www., and a root domain covers all its subdomains).
3. Tick Enable domain security and press Save Changes.
4. Open your site again in a private window and click the bubble; the chat should open normally.

This setting is available on the Basic and Pro plans. The spelling rules, what a visitor sees on a blocked site and what is not affected are explained in detail in the Domain Security section of the Widget page.

How the widget behaves#

• The bubble: a 76-pixel round icon with soft "pulse" rings around it. In the Right (center) and Left (center) positions it sits at the vertical middle of the screen edge; in Bottom right and Bottom left it sits in the bottom corner.
• The greeting bubble: appears about 1.5 seconds after the page opens and is shown once per page load. It can be closed with ✕; clicking it opens the chat. On Pro you can customize its text (Widget).
• The chat panel (computer): clicking the bubble opens a large panel next to it. You can resize the panel by dragging the dotted handle at its top corner; to close it, use the ✕ in the panel's corner or click the bubble again. The page behind the panel stays scrollable.
• The chat panel (phone): if the screen width is about 520 pixels or less, the panel opens full screen, a Back to site bar appears at the top and the bubble is hidden. While the panel is open, your site does not scroll in the background.
• The chat runs as a window (iframe) inside your site; it comes with its own styles and does not break your site's design. The chat page is not loaded until the panel is opened for the first time.
• Loading indicator: when the panel opens, three small bronze dots show in the middle of the panel until the chat is ready; then the chat appears with a short, smooth fade (no white or black screen flashes). If for any reason the chat does not send its "ready" signal, it is shown anyway at most about 1.5 seconds after the page has loaded. The same indicator also appears when the panel reloads after a language change.
• Always the light theme: the chat screen always opens in the light design, even if you use the Airoomier panel in the dark theme.
• Terms & Conditions window: the first time a guest opens the chat, they see a terms window that is the same for every business and cannot be changed from the panel (for its content, see Widget → Guest Link). Accept & Continue is remembered in that browser; Decline closes the window and lets the guest chat, but the window appears again the next time.
• If Domain Security is on and the widget is opened on a site that is not in the list, the bubble appears but the panel shows the message "Bu site için yetkilendirilmemiş" ("Not authorized for this site") instead of the chat.

Code options (data-* parameters)#

Example (code fixed to English):

<script async src="https://app.airoomier.com/widget.js" data-hotel="blue-bay-hotel" data-lang="en"></script>

Which language does the widget open in?#

The widget decides its language in this order:

1. data-lang in the code, if present,
2. otherwise the visitor's browser language,
3. if neither is one of the four supported languages (Turkish, English, German, Russian), English.

So the website widget does not use the Default Language from Business Info; it uses the visitor's/your site's language. If your site is in Turkish but a visitor's browser is in English, they will see English unless you add data-lang="tr". If your site has a language switcher, use the setLanguage method below. Guests can always change the language themselves with the TR/EN/DE/RU selector inside the chat.

Controlling it with JavaScript: AiroomierWidget#

The widget adds two small commands to the page under window.AiroomierWidget. Using them is optional; the widget works without them.

Examples:

<!-- Open the chat with your own button -->
<button onclick="window.AiroomierWidget && AiroomierWidget.open()">Talk to Mira</button>

<script>
  // When your site's language switcher changes, update the widget language too
  function siteLanguageChanged(code) {
    if (window.AiroomierWidget) AiroomierWidget.setLanguage(code);
  }
</script>

Things to know:

• Because the code loads with async, AiroomierWidget can be undefined for a moment right after the page opens. Check with window.AiroomierWidget && as above.
• setLanguage immediately updates the language of the greeting bubble on screen and of the panel labels. If the chat panel is closed, it reloads in the new language the next time it opens; if the panel is open, the ongoing conversation is left alone.
• There is no separate command to close the panel; the visitor closes it with ✕, Back to site or the bubble.

Step by step: sharing the Guest Link#

The Guest Link is your business's fixed, unchanging address (https://app.airoomier.com/assistant/blue-bay-hotel). Anyone who can open a link can talk to Mira directly; no website is needed.

1. Go to the Widget → Guest Link box.
2. Right-click the link (long-press on a phone) and copy the link address.
3. Paste it in the places that suit you:

Example message: "Hello! You can message our 24/7 digital receptionist Mira here: https://app.airoomier.com/assistant/blue-bay-hotel".

Adding a language to the link#

You can choose the language the chat opens in by adding ?lang= to the end of the link (tr, en, de, ru). Example for an Instagram account aimed at foreign guests: https://app.airoomier.com/assistant/blue-bay-hotel?lang=en. If you add no language, the chat opens in your business's Default Language; guests can change it with the TR/EN/DE/RU selector in the chat.

Step by step: a room QR code#

A room QR code tells Mira automatically which room a guest is writing from. The guest does not have to say their room number.

1. Open Room Types and go to the Physical Units list on the card of the relevant room type. See Room Types.
2. On the card of the relevant room (for example 101), click Edit.
3. At the bottom of the section that opens, click the Room Link & QR button.
4. A Room Link — 101 box opens: it contains the QR code, the link address, Copy Link and Download QR (PNG) buttons, and a Close button. The QR is generated in your browser (nothing is sent to an outside service).
5. Download the QR and print it on the room card or door (the file name looks like oda-101-qr.png).

When a guest scans the QR, the chat is linked to that room and a badge such as Room 101 appears in the chat header. The results:

• Mira gives this guest the Wi-Fi password (the password is only shown to guests who are staying; see Business Info).
• Requests the guest makes through Mira (for example towels or cleaning; only for the types you have switched on in Request Types) are linked to that room automatically; see Guest Requests. Without the QR/link, a request can only be opened if the guest has a confirmed booking covering today with a unit assigned.
• If the guest opens the same QR again later, they see the number of their open requests for that room.

Step by step: adding it to a phone like an app#

Guests can add Mira to their phone's home screen like an app by opening the Guest Link. There is nothing for you to set; this feature is on automatically.

1. The guest opens the Guest Link on their phone (via shortcut/QR/SMS).
2. At the top right of the chat screen, they see the Install App button (on a narrow screen only the phone icon shows).
3. Android / Chrome: they tap the button and confirm the install window that appears; the shortcut is added to the home screen.
4. iPhone / Safari: they tap the button. The window that appears lists these steps: (1) tap the Share icon in the toolbar, (2) tap Add to Home Screen, (3) tap Add at the top right. Afterwards they close the window with Got it.

The installed shortcut opens full screen and goes straight to your business's chat. Its name is the assistant's name (default "Mira"; on Pro, the name and photo you set). The app keeps no cache: chat, availability and prices are always live and up to date, and it does not work without internet. The shortcut opens the chat in your Default Language, as the Guest Link does. If the app is already installed, or the browser does not support installing, the Install App button does not appear.

What happens next#

• Every chat that comes in through the widget or link is listed on the Conversations page; see Conversations. These chats count toward your monthly AI conversation quota (Basic: 100 per month, Pro: 1000 per month; see Account and Plans). When the quota is full, the guest sees "We're quite busy right now..." and the Call Us / WhatsApp / Send an Email buttons.
• If a guest asks to book, the request lands in Bookings; see Bookings.
• Settings you change in the panel (position, bubble text, assistant name/photo) reach your site without changing any code, in about 1 minute at most.

Troubleshooting#

Tips and common mistakes#

• Live Preview first: try the assistant in the Live Preview on the Widget page before adding it to the site.
• Do not edit the code by hand: change the position and texts in the panel; the code itself never changes.
• Do not shorten or change the Guest Link: if the business identifier at the end of the link changes, the chat will not open.
• Test on mobile: most of your guests are on phones; try the full-screen opening and the Back to site bar once.
• Fill the gaps: if Mira says "I have no information" on a question, add the information under the Knowledge Base or Facilities.