Aliice Chat Widget

Embed Documentation for Developers

Getting Started

Embed the Aliice AI chat assistant on your website to provide instant customer support for your Aesthetics Clinic. The widget supports both English and French, and works seamlessly on WordPress, Webflow, Squarespace, and any HTML website.

✨ Features

• Bilingual support (English & French)
• Mobile responsive design
• Minimizable chat bubble
• Auto-opens option available
• No dependencies required

URL Parameters

Parameter	Values	Description
lang	`en` \| `fr`	Set widget language (default: en)
open	`true` \| `false`	Auto-open chat on load (default: false)

Example: https://aestheticclinic.vercel.app/aliicechat/embed?lang=fr&open=true

Smart Embed Script (Recommended)

This smart script creates an auto-resizing iframe that doesn't block clicks on your page. Just paste this code before the closing </body> tag.

✅ Recommended: The iframe auto-resizes to only cover the widget, allowing clicks to pass through to your page.

🇬🇧 English Version

<script>
(function() {
  var LANG = 'en';
  var BASE = 'https://aestheticclinic.vercel.app';
  var isOpen = false;
  
  // Create native DOM bubble (NOT in iframe - no background issues!)
  var container = document.createElement('div');
  container.id = 'aliice-widget-container';
  container.innerHTML = `
    <div id="aliice-bubble" style="position:fixed;bottom:70px;right:20px;z-index:9998;display:flex;align-items:flex-end;gap:12px;cursor:pointer;">
      <div id="aliice-tooltip" style="background:#fff;border-radius:16px 16px 4px 16px;padding:12px 16px;box-shadow:0 4px 24px rgba(0,0,0,0.12);border:1px solid #e2e8f0;max-width:200px;">
        <p style="margin:0;font-size:14px;font-weight:500;color:#1e293b;">Speak to Aliice 💬</p>
        <p style="margin:4px 0 0;font-size:12px;color:#64748b;">I'm here to help!</p>
      </div>
      <div style="width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#38bdf8,#0284c7,#1d4ed8);box-shadow:0 8px 32px rgba(14,165,233,0.5);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
        <img src="${BASE}/logos/AliiceAgent.jpg" style="width:52px;height:52px;border-radius:50%;border:2px solid rgba(255,255,255,0.9);object-fit:cover;" alt="Aliice"/>
      </div>
    </div>
    <iframe id="aliice-chat-frame" src="${BASE}/aliicechat/embed?lang=${LANG}&open=true" allow="microphone" style="position:fixed;bottom:70px;right:20px;width:420px;height:640px;border:none;z-index:9999;display:none;border-radius:16px;box-shadow:0 25px 60px rgba(0,0,0,0.3);"></iframe>
  `;
  document.body.appendChild(container);
  
  var bubble = document.getElementById('aliice-bubble');
  var tooltip = document.getElementById('aliice-tooltip');
  var frame = document.getElementById('aliice-chat-frame');
  
  bubble.onclick = function() {
    isOpen = true;
    bubble.style.display = 'none';
    frame.style.display = 'block';
  };
  
  window.addEventListener('message', function(e) {
    if (e.data && e.data.type === 'aliice-chat' && !e.data.open) {
      isOpen = false;
      frame.style.display = 'none';
      bubble.style.display = 'flex';
    }
  });
})();
</script>

🇫🇷 French Version

<script>
(function() {
  var LANG = 'fr';
  var BASE = 'https://aestheticclinic.vercel.app';
  var isOpen = false;
  
  var container = document.createElement('div');
  container.id = 'aliice-widget-container';
  container.innerHTML = `
    <div id="aliice-bubble" style="position:fixed;bottom:70px;right:20px;z-index:9998;display:flex;align-items:flex-end;gap:12px;cursor:pointer;">
      <div id="aliice-tooltip" style="background:#fff;border-radius:16px 16px 4px 16px;padding:12px 16px;box-shadow:0 4px 24px rgba(0,0,0,0.12);border:1px solid #e2e8f0;max-width:220px;">
        <p style="margin:0;font-size:14px;font-weight:500;color:#1e293b;">Parler avec Aliice 💬</p>
        <p style="margin:4px 0 0;font-size:12px;color:#64748b;">Je suis là pour vous aider!</p>
      </div>
      <div style="width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#38bdf8,#0284c7,#1d4ed8);box-shadow:0 8px 32px rgba(14,165,233,0.5);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
        <img src="${BASE}/logos/AliiceAgent.jpg" style="width:52px;height:52px;border-radius:50%;border:2px solid rgba(255,255,255,0.9);object-fit:cover;" alt="Aliice"/>
      </div>
    </div>
    <iframe id="aliice-chat-frame" src="${BASE}/aliicechat/embed?lang=${LANG}&open=true" allow="microphone" style="position:fixed;bottom:70px;right:20px;width:420px;height:640px;border:none;z-index:9999;display:none;border-radius:16px;box-shadow:0 25px 60px rgba(0,0,0,0.3);"></iframe>
  `;
  document.body.appendChild(container);
  
  var bubble = document.getElementById('aliice-bubble');
  var frame = document.getElementById('aliice-chat-frame');
  
  bubble.onclick = function() {
    isOpen = true;
    bubble.style.display = 'none';
    frame.style.display = 'block';
  };
  
  window.addEventListener('message', function(e) {
    if (e.data && e.data.type === 'aliice-chat' && !e.data.open) {
      isOpen = false;
      frame.style.display = 'none';
      bubble.style.display = 'flex';
    }
  });
})();
</script>

How The Professional Embed Works

✨ Same approach as Intercom, Drift, and Crisp!

Native DOM bubble - The chat bubble is a real HTML element on your page, NOT inside an iframe. This eliminates ALL background/blocking issues.

Hidden iframe - The chat window iframe is hidden by default (display:none). It only appears when the bubble is clicked.

Clean close - When chat is minimized, the iframe hides and the native bubble reappears. Zero blocking, zero background issues!

WordPress Integration

1Using "Insert Headers and Footers" Plugin (Easiest)

Install and activate the "Insert Headers and Footers" plugin (by WPCode)
Go to Settings → Insert Headers and Footers
Paste the iframe code in the "Scripts in Footer" section
Click Save

<!-- Aliice Chat Widget - PROFESSIONAL VERSION -->
<!-- Native DOM bubble + iframe only for chat window -->
<script>
(function() {
  var LANG = 'fr';
  var BASE = 'https://aestheticclinic.vercel.app';
  var isOpen = false;
  
  var container = document.createElement('div');
  container.id = 'aliice-widget-container';
  container.innerHTML = `
    <div id="aliice-bubble" style="position:fixed;bottom:70px;right:20px;z-index:9998;display:flex;align-items:flex-end;gap:12px;cursor:pointer;">
      <div id="aliice-tooltip" style="background:#fff;border-radius:16px 16px 4px 16px;padding:12px 16px;box-shadow:0 4px 24px rgba(0,0,0,0.12);border:1px solid #e2e8f0;max-width:220px;">
        <p style="margin:0;font-size:14px;font-weight:500;color:#1e293b;">Parler avec Aliice 💬</p>
        <p style="margin:4px 0 0;font-size:12px;color:#64748b;">Je suis là pour vous aider!</p>
      </div>
      <div style="width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#38bdf8,#0284c7,#1d4ed8);box-shadow:0 8px 32px rgba(14,165,233,0.5);display:flex;align-items:center;justify-content:center;flex-shrink:0;">
        <img src="${BASE}/logos/AliiceAgent.jpg" style="width:52px;height:52px;border-radius:50%;border:2px solid rgba(255,255,255,0.9);object-fit:cover;" alt="Aliice"/>
      </div>
    </div>
    <iframe id="aliice-chat-frame" src="${BASE}/aliicechat/embed?lang=${LANG}&open=true" allow="microphone" style="position:fixed;bottom:70px;right:20px;width:420px;height:640px;border:none;z-index:9999;display:none;border-radius:16px;box-shadow:0 25px 60px rgba(0,0,0,0.3);"></iframe>
  `;
  document.body.appendChild(container);
  
  var bubble = document.getElementById('aliice-bubble');
  var frame = document.getElementById('aliice-chat-frame');
  
  bubble.onclick = function() {
    isOpen = true;
    bubble.style.display = 'none';
    frame.style.display = 'block';
  };
  
  window.addEventListener('message', function(e) {
    if (e.data && e.data.type === 'aliice-chat' && !e.data.open) {
      isOpen = false;
      frame.style.display = 'none';
      bubble.style.display = 'flex';
    }
  });
})();
</script>

2Using Elementor

Edit your page with Elementor
Drag an "HTML" widget to your page
Paste the iframe code
Click Update

3Direct Theme Edit (Advanced)

Go to Appearance → Theme File Editor
Select your child theme (recommended)
Open footer.php
Paste the iframe code just before </body>
Click Update File

⚠️ Always use a child theme to prevent losing changes during theme updates.

Troubleshooting

Widget not appearing?

• Check if your theme has a high z-index element covering it
• Try adding z-index: 999999 !important; to the iframe style
• Ensure the code is placed before </body>

Widget blocking page clicks?

The widget uses pointer-events to only capture clicks on the chat bubble and window. If you're experiencing issues, ensure the full iframe code including the style tag is used.

CORS or security errors?

The widget is hosted on aestheticclinic.vercel.app which allows embedding on any domain. If you see errors, contact support.

Live Preview

Test the embed widget directly on this page. Look for the chat bubble in the bottom-right corner.

🇬🇧 Preview English Widget 🇫🇷 Preview French Widget

Need Help?

Our team is here to help you integrate the Aliice chat widget on your website.

📧 Email Support 📞 +41 22 732 22 23