Implementation Kit

Tools

Everything you need to add Sidekick to your website — button icons, embed code, and brand guidelines.

Static Button

Download the Sidekick icon
for static placement.

Use these icons anywhere you need a simple, non-animated Sidekick button — navigation bars, link cards, or printed materials. Right-click to save, or use the download buttons. PNG format with transparent background.

Icon Only

Light

For light backgrounds

Download light icon

Dark

For dark backgrounds

Download dark icon

Expanded with Text

Light

For light backgrounds

Download light button

Dark

For dark backgrounds

Download dark button

Animated Button

Add a floating Sidekick button
with expand and collapse animation.

A fixed-position button that appears in the bottom-right corner of your site. It expands on page load to introduce itself, collapses to just the icon, and re-expands on hover. Choose the method that works best for your site.

Recommended: Script tag

One line of code. We host the script so you get updates automatically. Replace the data-channel value with your Sidekick channel URL.

<script
  src="https://sidekickwellness.com/embed/sidekick-button.js"
  data-channel="YOUR_CHANNEL_URL"
  data-label="Sidekick"
  data-sublabel="Channel">
</script>

Options:

data-channel — your Sidekick channel URL
data-label — primary text (default: “Sidekick”)
data-sublabel — secondary text (default: “Channel”)

Alternative: Self-contained HTML

Full control, no external dependencies. Paste before your closing </body> tag. Replace YOUR_CHANNEL_URL with your channel link.

<a id="sk-btn" href="YOUR_CHANNEL_URL"
   target="_blank" rel="noopener"
   style="position:fixed;bottom:25px;right:25px;
   z-index:9999;text-decoration:none;
   display:flex;align-items:center">
  <span id="sk-pill" style="display:flex;
    align-items:center;padding:6px;
    border-radius:999px;
    background:rgba(128,128,128,0);
    transition:background .4s,padding .5s">
    <img src="https://sidekickwellness.com/img/Sidekick_icon_dark.png"
      alt="Sidekick" style="width:48px;height:48px;
      border-radius:50%">
    <span id="sk-text" style="display:flex;
      flex-direction:column;align-items:flex-start;
      line-height:1.1;overflow:hidden;max-width:0;
      opacity:0;transition:max-width .5s,
      opacity .4s .15s,margin-left .5s;
      margin-left:0;white-space:nowrap">
      <span style="font-size:2rem;
        font-weight:600">Sidekick</span>
      <span style="font-size:.75rem;opacity:.7;
        margin-top:-4px;align-self:flex-end">
        Channel</span>
    </span>
  </span>
</a>
<script>
(function(){
  var p=document.getElementById('sk-pill'),
      t=document.getElementById('sk-text'),
      b=document.getElementById('sk-btn'),tm;
  function ex(){p.style.background='rgba(128,128,128,.08)';
    p.style.padding='6px 16px 6px 6px';
    t.style.maxWidth='200px';t.style.opacity='1';
    t.style.marginLeft='10px';}
  function co(){t.style.transition=
    'max-width .5s,opacity .15s,margin-left .5s';
    t.style.opacity='0';t.style.maxWidth='0';
    t.style.marginLeft='0';
    p.style.background='rgba(128,128,128,0)';
    p.style.padding='6px';
    setTimeout(function(){t.style.transition=
    'max-width .5s,opacity .4s .15s,margin-left .5s'
    },600);}
  setTimeout(ex,300);tm=setTimeout(co,3500);
  b.onmouseover=function(){clearTimeout(tm);ex();};
  b.onmouseout=function(){tm=setTimeout(co,2000);};
})();
</script>

Use Sidekick_icon_light.png instead if your site has a dark background. The button auto-expands on page load, collapses after 3.5 seconds, and re-expands on hover.

Brand Guidelines

Using the Sidekick name and logo
on your site.

Follow these guidelines when representing Sidekick on your website or materials.

Naming

Always capitalize “Sidekick” as one word
Use “Sidekick Platform” for the full product name
Acceptable: “Powered by Sidekick” or “Ask Sidekick”
Do not abbreviate or alter the name

Logo Usage

Minimum display size: 32 × 32 pixels
Maintain equal padding around the icon
Do not stretch, rotate, or recolor the icon
Do not place on busy or low-contrast backgrounds

Colors

Primary: Indigo #4338CA
Dark background: #0C0F1A
Use these when creating “Powered by Sidekick” badges