Versions Compared

Old Version 64

changes.mady.by.user Derya Özdemir

Saved on

compared with

New Version Current

changes.mady.by.user Derya Özdemir

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Panel
panelIconIdatlassian-info
panelIcon:info:
bgColor#F4F5F7

This page is about Chat for JSM Cloud. Using Server or Data Center? Click here.

The Chat Widget installation process is pretty simple. On this page, you’ll learn how to add the Chat Widget to your website.

Prerequisites

  • To ensure users can access the chat functionality within an external website, make sure the Channel access setting in your JSM project settings is set to Open. With Restricted channel access, only users manually added as customers by the project administrator can initiate chats. For more information, refer to the Jira documentation.

    image-20240527-102229.pngImage Added

How to Add Chat Widget on a Website

  1. Navigate to the project you'll use to manage the service requests coming from the Chat Widget and open its Project Settings.

  2. From the sidebar, click Chat Settingsfor JSM > Chat Widget.

  3. Click Install.

    image-20240216-084013.pngImage Removed

    This will open a pop-up with installation instructions. Copy the installation code to the clipboard.

    Screen Shot 2024-02-16 at 11.40.36.pngImage Removed

    the Install button next to Website.

    image-20240509-183252.pngImage Added

Contents

Table of Contents
minLevel2
maxLevel2
outlinefalse
typelist
printablefalse

  1. This will open a pop-up with installation instructions. Copy the installation code to the clipboard and click Enable Chat Widget.

    Screen Shot 2024-02-16 at 11.40.36.pngImage Added

  1. Open your website’s backend. Access the server where your website is hosted using the tool that allows you to modify files or log in to your platform's dashboard.

  2. Locate the file that contains the </body> tag.

While it might differ depending on how your website is built, the rule of thumb would be to 
search for the files with .html or .php extension. Usually, it will be either index.html or index.php,
but there might also be some additional subpage files.

  1. Find the </body> tag, and add the JavaScript code you’ve copied before it.

  2. Paste your JavaScript code snippet above the closing </body> tag of your website's source
code.

  3. Save the changes.

  4. Go back to the Installation instructions and click Enable Chat Widget.

  5. Check your website to make sure the widget has appearedSave the changes and check your website.

Tada! 🎉 You have successfully integrated the Chat Widget with your website! You can now modify its appearance to fit your brand by changing the code.

Can’t see the widget on your website? Try these out:

  • Make sure you’ve enabled Chat Widget for the project on the Chat Settings > General Settings pagefor JSM > Chat Widget page.

  • Double-check the code changes

  • Verify widget visibility settings

  • Repeat the steps described above(“How to Add Chat Widget on a Website”) to make sure you’ve followed them correctly

  • Contact our support

Tada! 🎉 You have successfully integrated the Chat Widget with your website! You can now modify its appearance to fit your brand by changing the code.

Panel
panelIconId1f5e8
panelIcon:speech_left:
panelIconText🗨️
bgColor#F4F5F7
How to Customize the Chat Widget on your Website

How to Secure Your Chat Widget with Trusted URL(s) Feature

The Trusted URL(s) feature is an optional security measure that allows you to specify the specific website(s) where your Chat Widget should appear. This feature helps to prevent malicious actors from embedding the Chat Widget on unknown websites and potentially using it to impersonate your organization.

To use the Trusted URL(s) feature:

  1. Navigate to the Project Settings > Chat Settingsfor JSM > Chat Widget page.

  2. Under Website, you will see an option to add the URL(s) of websites where your Chat Widget should appear.

    image-20240216-085705.pngImage Removedimage-20240216-142206.pngImage Added

  3. Simply enter the URL(s) in the provided field. Ensure you add the correct protocol before your web address (e.g., https://).

  4. Click Save to apply the changes.

note

Panel
panelIconIdatlassian-info
panelIcon:info:
bgColor#F4F5F7

Please note that if you choose to skip this step, your Chat Widget may be embedded on unknown websites, potentially leading to security risks. We recommend that you use this feature to ensure the security of your Chat Widget.

How to Automatically Open Chat Widget on Page Entry

The Auto-Open Widget setting allows the Chat Widget to automatically open on an external web page when visitors access the page. This feature eliminates the need for customers to manually click on the widget icon, offering a more immediate and engaging interaction.

note

Panel
panelIconIdatlassian-info
panelIcon:info:
bgColor#F4F5F7

This feature exclusively applies to the Chat Widget embedded on external web pages and won't affect its behavior within customer portals.

To enable the Auto-Open Widget setting, follow these steps:

  1. Navigate to the Project Settings > Chat Settingsfor JSM > Appearance > (Under Website) Auto-Open Widget.

  2. Click the checkbox next to the Automatically open the Chat Widget when customer visits website Auto-Open Widget option.

    Screen Shot 2024-02-16 at 11.58.46.png

  3. Don't forget to click Save to apply the changes.

That's it! If you ever wish to revert to the default behavior (where the widget must be manually opened), simply return to the "Auto-Open Widget" setting and uncheck the box.

Recommended Content-Security-Policy Header Values

The Chat Widget connects to several external services to load necessary resources and achieve live delivery of chat messages. The host page needs to set at least the following Content-Security-Policy header value to make it work:

Code Block
style-src 'self' 'unsafe-inline' https://spartezchatfiles.b-cdn.net;
connect-src 'self' wss://chat-ws.spartez-software.com/ https://api.ipify.org https://spartezchatfiles.b-cdn.net https://chat-api.spartez-software.com https://spartez-chat-attachments-prod.s3.eu-central-1.amazonaws.com/ https://s3.eu-central-1.amazonaws.com/spartez-chat-attachments-prod https://appsync-api.spartez-software.com wss://appsync-api.spartez-software.com ;
img-src 'self' data: https://* ;
media-src 'self' data: https://spartezchatfiles.b-cdn.net;

The wildcard directive on img-src is required to load user avatars that can come from many different sources.

info

Chat for Jira Service Management is actively developed, so the recommended Content-Security-Policy value might change in the future.

1f5e8
Panel
panelIconId
panelIcon:speech_left:
panelIconText🗨️
bgColor#F4F5F7

Add How to Customize the Chat Widget to Jira Customer Portalon your Website