Customize Widget Appearance Using JS

Questions:

How do I limit the number of offers in my widget using JS?
How can I change the widget’s theme (light or dark) using JS?
How do I adjust the corner radius for softer edges using JS?
How can I apply my brand color to the widget using JS?
How can I disable the default background or borders (container) using JS?
How do I change the widget’s language or region format using JS?
How can I set the currency displayed in offers using JS?
Why is my widget not loading correctly when using JS?
How can I embed the widget in WordPress, Wix, or Shopify using JS?
Where can I find all widget parameters and defaults when using JS?

Description:

Customizing your Get Your Offers widget with JavaScript is just as easy!

If you prefer adding dynamic control, JavaScript gives you the flexibility to adjust themes, colors, limits, or even load multiple widgets — all with a few lines of code. It’s quick, powerful, and super simple to use.

Solution:

JS: Your integration code

Add the script inside :

<script src="https://getyouroffers.app/SCRIPTS/OffrAppManagement/current-offers.v1.js"></script>

Add a container inside :
```
<div id="get-your-offers-widget"></div>
```

Initialize the widget:

<script> 
__getyouroffers({   
widget: 'get-your-offers-widget',   
storeId: '1',   
limit: 8,   
theme: 'dark',   
radius: 12,   
brandColor: '#f51231',   
locale: 'en-US',   
currency: 'INR' }); 
</script>

Complete Integration Snippet

JavaScript API Integration

<script src="https://getyouroffers.app/SCRIPTS/OffrAppManagement/current-offers.v1.js"></script>

<div id="get-your-offers-widget"></div>

<script>
__getyouroffers({
  widget: 'get-your-offers-widget',
  storeId: '1',
  limit: 8,
  theme: 'light',
  radius: 12,
  brandColor: '#f51231',
  locale: 'en-US',
  currency: 'INR'
});
</script>

Tips and Tricks:

Key Things to Remember

Always include the latest script version (e.g. current-offers.v1.js) in the <head> or just before the closing </body> tag.
Use a valid storeId — it’s required for offers to appear.
Use only the JavaScript API (__getyouroffers({ ... })) — not both the HTML tag and JS for the same instance.
Adjust theme, brandColor, and radius in your API parameters to match your website’s design.
Set locale and currency according to your audience, e.g. locale: "de-DE" or currency: "EUR".
Check the browser console if the widget doesn’t load — missing parameters or invalid IDs are common causes.
Open your browser’s developer tools → Network tab to verify that offer data is being successfully fetched.