Custom loyalty programs widget UI bug in Zoho CRM 2021

CRM Zoho CRM
, , , , , , , ,
1

We developed a custom loyalty programs widget for our Zoho CRM 2021 instance to display customer reward points and tier status on the Contacts detail page. The widget works functionally, but there’s a significant UI bug that’s making it unusable.

The problem is that the tier status badges are overlapping with the points display, and the entire widget layout collapses on smaller screens. Here’s the HTML structure:


<div class="loyalty-widget">
  <span class="points-badge">1,250 pts</span>
  <span class="tier-badge">Gold</span>
</div>

The CSS should position these badges side-by-side, but instead they’re stacking and overlapping. We’ve tried adjusting the display properties and adding flexbox, but something in Zoho’s default styles seems to be overriding our custom CSS. The widget also doesn’t respect responsive breakpoints - it looks fine on desktop but completely breaks on tablet and mobile views.

This is affecting our sales team’s ability to quickly see customer loyalty status during calls. Has anyone dealt with CSS conflicts or HTML nesting issues in custom Zoho CRM widgets?

2

I’ve built several custom widgets for Zoho CRM 2021 and the responsive issue is common. You need to use Zoho’s built-in responsive classes rather than custom media queries. Check the Zoho CRM widget development documentation for the supported breakpoint classes - they handle the mobile/tablet rendering better than custom CSS.

3

The HTML structure looks too simple for what you’re trying to achieve. You need proper container nesting to prevent Zoho’s default styles from interfering. Wrap your badges in a parent container with explicit positioning, then use flexbox on that container. Also, make sure you’re testing in Zoho’s widget sandbox environment, not just in a standalone HTML file - the rendering context is different and Zoho injects additional wrapper divs that can break your layout.

4

Zoho CRM has pretty aggressive default styles that often conflict with custom widget CSS. You need to use more specific selectors or !important declarations to override them. Also check if you’re loading your CSS after Zoho’s default stylesheets - order matters.

5

The root cause involves all three areas you mentioned: CSS structure conflicts, improper HTML nesting, and violation of Zoho’s UI guidelines for custom widgets.

First, restructure your HTML with proper nesting hierarchy. The current flat structure with direct span siblings is incompatible with Zoho CRM’s widget rendering engine:

<div class="loyalty-widget-container">
  <div class="loyalty-content-wrapper">
    <div class="badge-group">
      <div class="points-badge">1,250 pts</div>
      <div class="tier-badge">Gold</div>
    </div>
  </div>
</div>

Using divs instead of spans provides better layout control, and the nested container structure isolates your widget from Zoho’s default styles. The outer container establishes widget boundaries, the content wrapper handles responsive behavior, and the badge-group manages badge positioning.

Second, implement CSS that follows Zoho’s widget UI guidelines and prevents style conflicts:

.loyalty-widget-container {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
}

.badge-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.points-badge, .tier-badge {
  display: inline-flex;
  padding: 6px 12px;
  border-radius: 4px;
}

The key is using flexbox with flex-wrap for responsive behavior rather than fighting Zoho’s default positioning. The gap property handles spacing without margin conflicts, and inline-flex on badges prevents the overlap issue you’re experiencing.

Third, address responsive breakpoints using Zoho’s widget viewport handling. Custom media queries often fail because Zoho widgets render in an iframe with different viewport dimensions. Instead, use percentage-based widths and flexbox wrapping:

For mobile compatibility, the flex-wrap: wrap in badge-group allows badges to stack naturally on smaller screens without explicit breakpoints. Add max-width constraints if needed:

.badge-group {
  max-width: 100%;
  justify-content: flex-start;
}

Critical implementation notes:

  • Load your CSS in the widget configuration’s “Style” section, not as an external file
  • Use class selectors with at least two levels of specificity (.loyalty-widget-container .badge-group) to override Zoho defaults
  • Avoid !important declarations - they cause maintenance issues and conflict with Zoho’s theme system
  • Test in the actual CRM environment, not in external HTML files - Zoho injects wrapper elements that affect rendering

The CSS structure should follow Zoho’s box model (border-box sizing), the HTML nesting must provide isolation layers, and the responsive approach should rely on flexible layouts rather than fixed breakpoints. This three-part solution addresses the overlap bug, responsive collapse issue, and style conflicts comprehensively.