TheSkinnyAI FAQ

Table of Contents

Getting Started

Setup & Coaching

Settings tab

Content tab

My Skinny tab

Teams & Roles

Invitations

Multi‑tenant

Reporting

Usage

Shows overall activity including total chats and a time‑series chart. Use the date range to narrow to recent periods.

History

This is where your new leads will be listed.

This also lists recent conversations with sentiment, lead confidence, latency, request ID, model, and message count. Click a row to see the transcript.

Analysis & Reports

History Exports

Billing

Security & Permissions

Widget & Language Support

Troubleshooting

Widget button position looks better in different corners by device

Many sites prefer the chat button in different corners depending on screen size: top‑left on desktop, bottom‑left on tablets, and bottom‑right on mobile. You can implement this responsively by setting the widget’s data-position at load time based on media queries.

Example (site‑specific embed logic):

<script>
// Decide button position by viewport width
var pos = 'top-left';
try {
  var isMobile = window.matchMedia('(max-width: 575.98px)').matches;
  var isTablet = window.matchMedia('(min-width: 576px) and (max-width: 1199.98px)').matches;
  if (isMobile) pos = 'bottom-right';
  else if (isTablet) pos = 'bottom-left';
} catch (e) {}

var s = document.createElement('script');
s.src = 'https://theskinnyai.com/chatbot-widget.js';
s.dataset.tenantId = 'YOUR_TENANT_ID';
s.dataset.name = 'Ask Skinny';
s.dataset.position = pos; // top-left | top-right | bottom-left | bottom-right
document.body.appendChild(s);
</script>

If you use data-target to mount inside your own element, the widget won’t float; position that container with your CSS instead of data-position.

Custom Launching TheSkinnyAI

If you want to hide the default launcher and trigger the chat from your own buttons/links, mount the widget into a hidden target and open it programmatically.

Embed with hidden target:

<div id="skinny-mount" style="display:none"></div>
<script
  src="https://theskinnyai.com/chatbot-widget.js"
  data-tenant-id="YOUR_TENANT_ID"
  data-target="skinny-mount"
  data-name="Ask Skinny"
  data-theme="dark">
</script>

Add open/close helpers and your triggers:

<script>
function openSkinny(scope){
  try{
    var host = scope
      ? document.querySelector('[data-skinny-button][data-skinny-scope="'+scope+'"]')
      : document.querySelector('[data-skinny-button]');
    var btn = host && host.shadowRoot && host.shadowRoot.querySelector('.btn');
    if(btn) btn.click();
  }catch(e){}
}
function closeSkinny(scope){
  try{
    var panel = scope
      ? document.querySelector('[data-skinny-panel][data-skinny-scope="'+scope+'"]')
      : document.querySelector('[data-skinny-panel]');
    var x = panel && panel.shadowRoot && panel.shadowRoot.querySelector('.close');
    if(x) x.click();
  }catch(e){}
}
</script>

<!-- Your custom UI -->
<a href="#" onclick="openSkinny();return false;">Chat with us</a>
<button onclick="closeSkinny()">Close Chat</button>

Tip: Use data-scope on the embed to control multiple widgets independently (pass the same scope to openSkinny/closeSkinny).