Integrate Zammad chat on wordpress site

  • Used Zammad version: 5.1.1
  • Used Zammad installation type: ( apt install zammad …)
  • Operating system: Ubuntu 20.04.4
  • Browser + version: Chrome

Hello guys,

does somebody know where i have to put the JQuery Script on my Wordpress Theme?
Everywhere i put it in the i dont get a Chat displayed on the Website.

Best greetings

We placed it in footer.php of the Wordpress theme, just before the closing body tag.

Please note, if your theme already uses jQuery (most themes do) make sure not to load jQuery again.
Furthermore you’ll need to slightly change Zammad’ example js code to avoid function conflicts.

An example:

<script src='https://zammad.domain.tld/assets/chat/chat.min.js' id='zammad-chat'></script>
<script>
(function($) {
  new ZammadChat({
    title: 'Chat with us',
    background: '#6f6f6e',
    fontSize: '13px',
    chatId: 1
  });
})(this.jQuery);
</script>

</body>
</html>
1 Like

hello Tom,

thanks for your quick answer.

I’ve include the Scriptcode aswell in the footer.php
Do i need to rebuild the Page with a command or something else ?

Saving the footer.php and restart apache doesnt show up the Chat.
I would be happy for a further explanation.

No, there is nothing to rebuild or reload after changing a WP theme file.

If you create a single, simple html file, does the chat show up there?

Hey,

no sadly not. If i open the test.html site i just see my Head but the Chatwindow in the body not.

#edit

i think there must be a failure in my Script. If i try to access the URL via curl i get the completly code.

Thats my Scriptphrase :

<!DOCTYPE html>
<html>
        <head>
                Testseite Script
        </head>

<body>

<script src="https://zammad.ticketsystem.de/assets/chat/chat.min.js"></script>

<script>
(function($) {
  new ZammadChat({
    background: '#d1d1d0',
    fontSize: '12px',
    chatId: 1
  });
})(this.jQuery);
</script>

</body>

</html>

The URL is a example url.

In your example jQuery is not included, this will not work.

Please see the examples in the Zammad admin section.

Thanks for the reminder Tom,

even if I add the following phrase

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

I do not see any changes on the test.html page

Strange, the Zammad Chat is usually quite straightforward to set up.

Anyway, just to be sure, at least one agent has turned the chat in Zammad on?
If so, what does the browser console say, any errors there?

This phrases should all stay in the same HTML Site?

I just get this on the HTML Site:

I got more informations out of the network analyses of the Webbrowser.

WebSocket connection to ‘wss://testurl.de/ws’ failed: Error during WebSocket handshake: Unexpected response code: 500

Thats what iam getting.

There seems to be no Zammad instance on testurl.de?

That was a example URL. Not the real one. On the main URL is a Zammad installation. Its a internal installation so not available via Internet.

The upper response is out of the Browser Network analyzer

I wont say that there is maybe a problem in the Proxy Konfiguration but normally its the same like everyone else use it aswell. But i dont get a response of the wss url.
I also checked if the ports are up, netstat says yes.

Here my Configuration:

etc/apache2/sites-enabled/zammad_ssl.conf
#
# this is an example apache 2.4 config for zammad
# Please visit https://docs.zammad.org for further input on how to configure
# your apache to work with Zammad
#

# security - prevent information disclosure about server version
ServerTokens Prod

<VirtualHost *:80>
    ServerName ticketsystem.testurl.de
    Redirect permanent / https://ticketsystem.testurl.de
</VirtualHost>

<VirtualHost *:443>
    SSLEngine on
    SSLProtocol all -SSLv2 -SSLv3
    SSLCipherSuite EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH

    SSLCertificateFile /etc/ssl/certs/20200603.pem
    SSLCertificateKeyFile /etc/ssl/private/20200603.key


    # replace 'localhost' with your fqdn if you want to use zammad from remote
    ServerName ticketsystem.testurl.de

    ## don't loose time with IP address lookups
    HostnameLookups Off

    ## needed for named virtual hosts
    UseCanonicalName Off

    ## configures the footer on server-generated documents
    ServerSignature Off

    ProxyRequests Off
    ProxyPreserveHost On

   <Proxy 127.0.0.1:3000>
      Require local
    </Proxy>

RequestHeader set X_FORWARDED_PROTO 'https'
RequestHeader set X-Forwarded-Ssl on


    ProxyPass /assets !
    ProxyPass /favicon.ico !
    ProxyPass /apple-touch-icon.png !
    ProxyPass /robots.txt !
    ProxyPass /ws ws://127.0.0.1:6042/
    ProxyPass / http://127.0.0.1:3000/

    # change this line in an SSO setup
    RequestHeader unset X-Forwarded-User

    # Use settings below if proxying does not work and you receive HTTP-Errror 404
    # if you use the settings below, make sure to comment out the above two options
    # This may not apply to all systems, applies to openSuse
   # ProxyPass /ws ws://127.0.0.1:6042/ "retry=1 acque=3000 timeout=600 keepalive=On"
   # ProxyPass / http://127.0.0.1:3000/ "retry=1 acque=3000 timeout=600 keepalive=On"

    DocumentRoot "/opt/zammad/public"

    <Directory />
        Options FollowSymLinks
        AllowOverride None
    </Directory>

    <Directory "/opt/zammad/public">
        Options FollowSymLinks
              Require all granted
    </Directory>
</VirtualHost>