LW & OptiSigns - widget style not displaying properly

One of our units uses OptiSigns for the digital sign displays in their building. OptiSigns uses a CMS that allows you to embed HTML code, so they tried pasting the HTML code for a LiveWhale widget to display upcoming events on the sign. The widget does display, however all of the design styling is missing - font, color, etc. See screenshots of widget preview in LW and actual display in OptiSigns.

Wondering if LW support has a solution or workaround for this - or if any other schools are using LW + OptiSigns and have figured this out. Thanks!


Hi Jen,

Sorry to hear this is giving them trouble – if you have a widgets.less (or widgets.css or widgets.scss) in your _ingredients/themes/global/styles/ folder, that should get injected alongside the normal copy/paste widget code.

My hunch is that perhaps the LWC widget preview is showing those styles plus other calendar-wide styles that are doing things like loading your proper fonts and blanket page stylings, since the intention is that LWC widgets generally get added to a page that’s already loading your site-wide CSS (rather than a fully empty page). My best suggestion would be to try hot-linking in the screen HTML setup to some of the .css files from your main site and/or the calendar to see if that helps bring in other missing styles.

(Or, if you’re able to get a visible URL of what the signage is seeing, that would make it easier to help debug via a web browser.)

Hope this helps!
Karl

We would create a webpage that shows the events, and add the page as an OptiSigns item. We don’t use OptiSigns, but in shopping for a system I checked them out and confirmed they have this functionality.

1 Like

Ed, thanks so much - I passed this along to the unit and it worked!

2 Likes