Chat external custom CSS not loading

Technical assistance
1
  • Used Zammad version: 2.6.x
  • Used Zammad installation source: zammad community version
  • Operating system: windows 10
  • Browser + version: chrome 68.

### Expected behavior:

chat loads custom css file and minified widget and extended widget opens in company colors and specified styling in the bottom right.

### Actual behavior:

chat loads without styling and is appended to body in full width / uses browser main styles. External .css file does not seem to be requested at any time during load.

I used the cssAutoload: and cssUrl: options in the zammad snippet along with background: an debug: options. all options except the cssUrl: option seem to work.I hosted my .css file on our company blog for testing purposes and copied all default styles into the new chat.css.
Since the documentation on the chat is a little thin at the moment I thought of a few reasons which I cannot validate right now:

  • Does the option expect a relative path / file path / folder path?
  • Does it have to be hosted on the same domain / sub domain as the chat?
  • Does it have trouble endoding / decoding external URLs?
  • Does it have to be named chat.css or does something like zammad-chat.css work?

This is the code for the snippet:

<script src="http://development-domain.de/assets/chat/chat.min.js"></script>
<script>
jQuery(document).ready(function($) {
	new ZammadChat({
      	cssAutoload: false,
      	cssUrl: 'https://www.blog-domain.de/blog/wp-content/uploads/2018/09/chat.css',
		background: '#FF69B4',
      	debug: true,
		fontSize: '12px',
		flat: true,
		chatId: 1,
	});
});
</script>

Thanks in advance.

2

Sorry for the delay, I’ll posting my response here in public too, as this might be useful to others.
Fetching CrossDomain CSS-Files is not possible. It might be possible with fiddling with scripts and server-responses, but in general I wouldn’t do that.

Please see:

You have two different options to work around this “problem”:

  • Host the CSS-File on the same Domain where the page lays and the chat is being used
  • Use a proxy directive for just this one particular file (and thus fetch it from another server).

I personally prefer option one, but everyone has to decide that them self :slight_smile:

3

This topic was automatically closed 120 days after the last reply. New replies are no longer allowed.