The Spur Live Chat widget is ready to use as soon as you install it, but sometimes you might want to move it around your site. Maybe it’s covering another button, overlapping with your “scroll to top” arrow, or you just want it in a different spot for design reasons.
The good news? You don’t need to rewrite code or reinstall anything, you just add a few lines of instructions (CSS code) to your site, and you can control exactly where the chat button and chat window sit.
This guide walks you through it step by step.
What exactly can you move?
There are two parts of the widget you can position:
The Floating Chat Button – the little circle your visitors click to open chat.
The Chat Window (Container) – the chat box that opens when someone clicks the button.
What are “CSS Variables” (in simple terms)?
Think of these variables like labels for measurements. You set how far away from the bottom, right, or left each part should be, and your website follows that instruction.
Here’s what you can control:
Floating Button Positioning
-spur-button-bottom
: Distance from bottom of the screen (default:20px
)-spur-button-right
: Distance from right edge when positioned bottom-right (default:25px
)-spur-button-left
: Distance from left edge when positioned bottom-left (default:25px
)
Widget Container Positioning
-spur-widget-bottom
: Distance from bottom of the screen for the chat widget (default:100px
)-spur-widget-right
: Distance from right edge when positioned bottom-right (default:20px
)-spur-widget-left
: Distance from left edge when positioned bottom-left (default:20px
)
Step‑by‑Step Instructions
Step 1: Find your website’s CSS area
Every platform has a spot to add custom CSS:
Shopify: Go to Online Store > Themes > Customize > Theme Settings > Custom CSS
WordPress: Go to Appearance > Customize > Search for ''Customize CSS'' on the page that opens, you'll find ''Additional CSS'' settings there.
Wix/Squarespace/etc.: Look for “Custom Code” or “Custom CSS” settings.
Tip: If you can’t find it, Google “Add custom CSS on [your platform]”, every platform has a guide.
Step 2: Paste the CSS code
Start with this basic template:
/* Move the button closer to the bottom-right corner */
:root {
--spur-button-bottom: 10px;
--spur-button-right: 15px;
}
/* Move the button to a custom position on the left */
:root {
--spur-button-bottom: 30px;
--spur-button-left: 40px;
}
This is using Spur’s default positions, you’ll tweak the numbers next.
Step 3: Adjust the numbers
Here’s how the numbers work:
Smaller number = Closer to the edge
Bigger number = Moves further away from the edge
Examples:
Change --spur-button-bottom: 20px; to 10px to move the button closer to the bottom.
Add --spur-button-left: 40px; to move the button to the left side of your screen.
Example screenshot (before changes were made to the CSS to move the widget to the left):
Example screenshot (after changes were made to the CSS to move the widget to the left):
Step 4: Save and refresh your site
Once you save, refresh your website, you should see the chat button (or chat box) instantly move to the new position.
No need to reinstall or reset Spur. The widget automatically adjusts.
Examples You Can Copy & Paste
Move the button slightly closer to the corner:
:root {
--spur-button-bottom: 10px;
--spur-button-right: 15px;
}
Move the button to the left side:
:root {
--spur-button-bottom: 30px;
--spur-button-left: 40px;
}
Move the chat window up slightly:
:root {
--spur-widget-bottom: 80px;
--spur-widget-right: 30px;
}
Full customization for both button & chat box:
:root {
--spur-button-bottom: 15px;
--spur-button-right: 20px;
--spur-widget-bottom: 90px;
--spur-widget-right: 25px;
}
Notes
You can use pixels (px), percentages (%), or other units like rem.
If you don’t set a property, Spur will use the default position.
All changes are instant once saved.
Mobile responsiveness stays intact, you don’t need to do anything extra.
Quick Summary
Add Spur’s CSS variables to your custom CSS area.
Adjust the numbers until the button/chat box sits where you want it.
Save & refresh, and you’re done!