Maintenance: Improve instructions how to add chat widget to a web page

zammad · May 24, 2024 · 462b120 · 462b120
1 parent 9c49a21
commit 462b120
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 10 deletions.
diff --git a/app/assets/javascripts/app/controllers/_channel/chat.coffee b/app/assets/javascripts/app/controllers/_channel/chat.coffee
@@ -10,6 +10,7 @@ class ChannelChat extends App.ControllerSubContent
     'click .js-toggle-chat': 'toggleChat'
     'change .js-chatSetting input': 'toggleChatSetting'
     'click .js-eyedropper': 'pickColor'
+    'change .js-chat-jquery-widget': 'switchScriptPreview'
 
   elements:
     '.js-browser': 'browser'
@@ -303,6 +304,10 @@ class ChannelChat extends App.ControllerSubContent
 
     @colorField.val("rgb(#{pixels.slice(0,3).join(',')})").trigger('change')
 
+  switchScriptPreview: (e) ->
+    @$('.js-chat-jquery-widget-jquery').toggleClass('hide', !e.currentTarget.checked)
+    @$('.js-chat-jquery-widget-vanilla').toggleClass('hide', e.currentTarget.checked)
+
   toggleChat: =>
     @chat.toggleClass('is-open')
     @isOpen = @chat.hasClass('is-open')

diff --git a/app/assets/javascripts/app/views/channel/chat.jst.eco b/app/assets/javascripts/app/views/channel/chat.jst.eco
@@ -137,14 +137,51 @@
 
   <p><%- marked(@T('Insert the widget code into the source code of every page the chat shall be visible on. It should be placed at the end of the page\'s source code before the §</body>§ closing tag.')) %></p>
 
-  <h3><%- @T('Requirements') %></h3>
-  <p><%- @T("Zammad Chat requires jQuery. If you don't already use it on your website, you can add it like this:") %></p>
-  <pre><code class="language-html js-code">&lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt;</code></pre>
+  <div class="manage-chat-jquery-switch-container">
+    <div class="zammad-switch zammad-switch--small">
+       <input name="jquery" type="checkbox" id="chat-jquery" class="js-chat-jquery-widget">
+       <label for="chat-jquery"></label>
+    </div>
+    With jQuery
+  </div>
+
+  <div class="js-chat-jquery-widget-vanilla">
+    <h3><%- @T('Show chat automatically') %> (<%- @T('default') %>)</h3>
+    <p><%- @T('The chat will show up once the connection to the server got established and if there is an operator online to chat with.') %></p>
+
+    <pre><code class="language-html js-code">&lt;script src="<%= @baseurl %>/assets/chat/chat-no-jquery.min.js"&gt;&lt;/script&gt;
+&lt;script&gt;
+(function() {
+  new ZammadChat({
+<span class="js-modal-params"></span>
+  });
+})();
+&lt;/script&gt;</code></pre>
 
-  <h3><%- @T('Show chat automatically') %> (<%- @T('default') %>)</h3>
-  <p><%- @T('The chat will show up once the connection to the server got established and if there is an operator online to chat with.') %></p>
+  <h3><%- @T('Manually open chat') %></h3>
+  <p><%- @T('If you want to open the chat by clicking a button, set the option §show§ to §false§ and add the class §open-zammad-chat§ to the button.') %></p>
+  <pre><code class="language-html js-code">&lt;button class="open-zammad-chat"&gt;Chat with us&lt;/button&gt;
 
-  <pre><code class="language-html js-code">&lt;script src="<%= @baseurl %>/assets/chat/chat.min.js"&gt;&lt;/script&gt;
+&lt;script src="<%= @baseurl %>/assets/chat/chat-no-jquery.min.js"&gt;&lt;/script&gt;
+&lt;script&gt;
+(function() {
+  new ZammadChat({
+<span class="js-modal-params"></span>,
+    show: false
+  });
+})();
+&lt;/script&gt;</code></pre>
+  </div>
+
+  <div class="js-chat-jquery-widget-jquery hide">
+    <h3><%- @T('Requirements') %></h3>
+    <p><%- @T("If you don't already use jQuery on your website, you can add it like this:") %></p>
+    <pre><code class="language-html js-code">&lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt;</code></pre>
+
+    <h3><%- @T('Show chat automatically') %> (<%- @T('default') %>)</h3>
+    <p><%- @T('The chat will show up once the connection to the server got established and if there is an operator online to chat with.') %></p>
+
+    <pre><code class="language-html js-code">&lt;script src="<%= @baseurl %>/assets/chat/chat.min.js"&gt;&lt;/script&gt;
 &lt;script&gt;
 $(function() {
   new ZammadChat({
@@ -166,6 +203,7 @@ $(function() {
   });
 });
 &lt;/script&gt;</code></pre>
+  </div>
 
   <h3><%- @T("Why doesn't the chat show up?") %></h3>
   <p>

diff --git a/app/assets/stylesheets/zammad.scss b/app/assets/stylesheets/zammad.scss
@@ -12468,6 +12468,16 @@ output {
   }
 }
 
+.manage-chat-jquery-switch-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  .zammad-switch {
+    @include bidi-style(margin-right, 8px, margin-left, 8px);
+  }
+}
+
 .browser {
   margin: 0 0 20px;
   position: relative;

diff --git a/i18n/zammad.pot b/i18n/zammad.pot
@@ -6824,6 +6824,10 @@ msgstr ""
 msgid "If this regex matches, no notification will be sent by the sender."
 msgstr ""
 
+#: app/assets/javascripts/app/views/channel/chat.jst.eco
+msgid "If you don't already use jQuery on your website, you can add it like this:"
+msgstr ""
+
 #: app/assets/javascripts/app/views/admin_password_auth/request_sent.jst.eco
 #: app/assets/javascripts/app/views/password/reset_sent.jst.eco
 #: app/frontend/apps/desktop/pages/authentication/views/AdminPasswordAuth.vue
@@ -16581,10 +16585,6 @@ msgstr ""
 msgid "Zammad"
 msgstr ""
 
-#: app/assets/javascripts/app/views/channel/chat.jst.eco
-msgid "Zammad Chat requires jQuery. If you don't already use it on your website, you can add it like this:"
-msgstr ""
-
 #: app/assets/javascripts/app/views/channel/form.jst.eco
 msgid "Zammad Forms requires jQuery. If you don't already use it on your website, you can add it like this:"
 msgstr ""