Open Chat Widget with JavaScript

hostbend · May 17, 2020, 6:27pm

Infos:

Used Zammad version: 3.3.x
Used Zammad installation source: package
Operating system: CentOS 7
Browser + version: Chrome

Hello everyone! I just have a general question. I know that opening the chat widget via a button class is possible, however it doesn’t appear to work for normal links (or at least not in my case). I was wondering if there’s a JavaScript function I could use to open the chat widget?

hostbend · May 17, 2020, 7:08pm

Actually the reason it’s not working appears to be with Jquery:

Uncaught Error: Syntax error, unrecognized expression: #.modal
at Function.ga.error (jquery-2.1.4.min.js:2)
at ga.tokenize (jquery-2.1.4.min.js:2)
at ga.select (jquery-2.1.4.min.js:2)
at Function.ga [as find] (jquery-2.1.4.min.js:2)
at n.fn.init.find (jquery-2.1.4.min.js:2)
at new n.fn.init (jquery-2.1.4.min.js:2)
at n (jquery-2.1.4.min.js:2)
at HTMLAnchorElement.<anonymous> (wp-scripts.js?ver=1.0.6:49)
at HTMLBodyElement.dispatch (jquery-2.1.4.min.js:3)
at HTMLBodyElement.r.handle (jquery-2.1.4.min.js:3)

hostbend · May 17, 2020, 9:02pm

Can someone tell me what I’m doing wrong here? I’ve implemented the widget code and jQuery along with a class in my link, but it’s still not working (no errors now in the console).

<a class="buttonizer-button button-mobile-1 button-desktop-1 open-zammad-chat" data-buttonizer="buttonizer-button-5teIQUd3z1SEbU6" href="#1"><div class="buttonizer-label">Message Us</div><i class="fas fa-comment-alt"></i></a>

hostbend · May 17, 2020, 9:30pm

As you can see here from the console, it appears to be connecting to the Websocket just fine. The only thing that happens when I click on the button is that it stops the timeout and restarts it. It doesn’t actually open the widget.

JQMIGRATE: Migrate is installed, version 1.4.1
pixel.js?id=fc9eb60e5107e:1 runPoptinNow
pixel.js?id=fc9eb60e5107e:1 initiatePullPoptinsRequest()
chat.min.js:1 chat debug || lang: No en-US found, try first two letters
chat.min.js:1 chat debug || lang: en
chat.min.js:1 chat debug || load css from 'https://domain.tld/assets/chat/chat.css'
chat.min.js:1 io debug || Connecting to wss://domain.tld/ws
chat.min.js:1 io debug || onOpen Event
chat.min.js:1 chat debug || widget rendered
chat.min.js:1 idleTimeout debug || Start timeout in 6 minutes
chat.min.js:1 io debug || send chat_status_customer Object
chat.min.js:1 io debug || onMessage [{"event":"chat_status_customer","data":{"state":"online"}}]
chat.min.js:1 chat debug || ws:onmessage Object
chat.min.js:1 chat debug || widget ready for use
chat.min.js:1 idleTimeout debug || Stop timeout of 6 minutes
chat.min.js:1 idleTimeout debug || Start timeout in 6 minutes

MrGeneration · May 25, 2020, 8:03am

It’s not possible to achieve the chat opening on a href clicking - at least not without changes to the code (not recommended). One of the guilty lines is this one:

github.com

zammad/zammad/blob/develop/public/assets/chat/chat.js#L987


    return html;
  } else {
    return document.body;
  }
};


ZammadChat.prototype.render = function() {
  if (!this.el || !$('.zammad-chat').get(0)) {
    this.renderBase();
  }
  $("." + this.options.buttonClass).addClass(this.inactiveClass);
  this.setAgentOnlineState('online');
  this.log.debug('widget rendered');
  this.startTimeoutObservers();
  this.idleTimeout.start();
  this.sessionId = sessionStorage.getItem('sessionId');
  return this.send('chat_status_customer', {
    session_id: this.sessionId,
    url: window.location.href
  });
};

We’re explicitely checking on button elements.

system · September 22, 2020, 8:03am

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