Custom map widget for territory assignment not loading after UI theme update, breaking sales rep view

CRM Zendesk Sell
, , , , , , , ,
1

After a recent UI theme update in our zs-2022 instance, the custom map widget we use for territory assignment has stopped loading completely. The widget was working perfectly before the theme change and displays territory boundaries based on geographic data.

We’re seeing CORS policy errors in the browser console when the widget tries to load, and the widget embed configuration that worked previously now shows a blank space. I’m concerned this is related to UI theme compatibility since nothing else changed in our setup.

The console error shows:


Access to fetch at 'https://maps-cdn.example.com/api' from origin
'https://ourcompany.zendesk.com' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present.

Our sales team relies heavily on this visual territory assignment tool. Has anyone dealt with custom widgets breaking after theme updates?

2

Theme updates in zs-2022 can definitely affect custom widgets. The new theme might be using a different Content Security Policy. Check if your widget’s external resource URLs are whitelisted in the app configuration. You may need to update the CSP headers.

3

I’ve seen this exact issue. The problem isn’t just CORS - the new theme in zs-2022 changed how custom widgets are embedded. Check your widget’s container div and make sure the data attributes match the new theme’s requirements. You might need to update your embed configuration with new CSS classes.

4

I can help you fix this - I’ve resolved this exact issue for multiple clients after zs-2022 theme updates. Your problem involves all three areas: CORS policy enforcement, widget embed configuration, and UI theme compatibility.

CORS Policy Enforcement: The new theme in zs-2022 implements stricter Content Security Policy (CSP) rules. You need to update your app’s manifest.json to explicitly whitelist your map CDN:

"contentSecurityPolicy": {
  "connect-src": ["https://maps-cdn.example.com"]
}

Additionally, modify your fetch request to include credentials mode:

fetch('https://maps-cdn.example.com/api', {
  mode: 'cors',
  credentials: 'omit'
})

Widget Embed Configuration: The new theme changed the required data attributes for custom widgets. Update your widget container HTML:

<div class="custom-widget-container"
     data-widget-type="map"
     data-theme-compatible="v2">
</div>

Your widget initialization also needs updating to work with the new theme’s component lifecycle:

if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initMapWidget);
} else {
  initMapWidget();
}

UI Theme Compatibility: The new theme uses CSS Grid instead of Flexbox for layout, which affects widget positioning. Add these CSS overrides to your widget:

.custom-widget-container {
  display: block !important;
  position: relative !important;
  z-index: 100;
  min-height: 400px;
}

The theme also introduced new CSS custom properties. Update your widget styles to use theme variables:

.map-widget {
  background: var(--theme-background-primary);
  border: 1px solid var(--theme-border-color);
}

Complete Fix Checklist:

  1. Update manifest.json with CSP rules for your map CDN
  2. Modify widget HTML with new data attributes (data-theme-compatible=“v2”)
  3. Add CSS overrides for display and positioning
  4. Wrap initialization in proper DOM ready check
  5. Update fetch calls with explicit CORS mode
  6. Use theme CSS variables for styling consistency

Testing Steps:

  1. Clear browser cache completely
  2. Verify manifest changes deployed successfully
  3. Check browser console for remaining CSP violations
  4. Test widget loading with network throttling to catch timing issues

The root cause is that zs-2022’s new theme enforces modern web security standards that weren’t required in older themes. Your widget code needs updating to comply with these standards while also adapting to the new DOM structure and CSS framework.

After implementing these changes, your territory assignment map should load correctly. The key is addressing all three compatibility layers simultaneously - security policy, embed configuration, and theme styling.

5

Theme updates often break custom widgets due to CSS specificity changes. Your widget container might be inheriting display:none or visibility:hidden from the new theme’s base styles. Inspect the element in browser dev tools and check computed styles. You may need to add !important flags to your widget’s CSS or increase selector specificity to override the theme defaults.

6

We experienced similar issues after a theme update. Our map widget stopped working because the new theme loaded resources in a different order, causing initialization timing problems. Adding a DOMContentLoaded listener helped ensure our widget code ran at the right time.

7

Have you checked the widget’s initialization script? Sometimes theme updates modify the DOM structure, and if your widget is looking for specific parent elements or selectors that no longer exist, it won’t render properly.