/
How to take an email address from the page and paste it automatically into the Chat form (Cloud)

How to take an email address from the page and paste it automatically into the Chat form (Cloud)

Owned by Mariusz Graj, created
Last updated: Sept 25, 2024 by Derya Özdemir
2 min read

This guide explains how to automatically copy an email address from your website to the chat form when using Chat for Jira Service Management (Cloud). This functionality requires adding a custom script to your website.

 Steps

  1. Please copy and use the script on your website, which is visible below. It starts from line 17. For privacy reasons, I’ve anonymized the details of my Chat instance in line 15 by replacing them with xxxxx:

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Email Input Example</title> </head> <body> <!-- Paragraph containing the email value --> <p id="email">example@example.com</p> <!-- Loading an external chat widget script --> <script src="https://chat-api.spartez-software.com/chat-widget.js" defer></script> <chat-widget jira-id="xxxxx" service-desk-id="4"></chat-widget> <!-- Your JavaScript code --> <script> function tryUpdateEmail() { const chatWidget = document.querySelector('chat-widget'); // Check if chatWidget exists and has a shadowRoot if (chatWidget && chatWidget.shadowRoot) { const shadowRoot = chatWidget.shadowRoot; const emailInput = shadowRoot.querySelector('#Email\\ test input'); // If the input field is found, update its value with the email from the paragraph if (emailInput) { emailInput.value = document.getElementById('email').innerText; console.log('Input found and updated:', emailInput.value); return; // Stop further attempts after finding the element } } // Retry every 500 ms until the input field is found setTimeout(tryUpdateEmail, 500); } // Start trying to update the input field 1 second after the DOM is fully loaded document.addEventListener("DOMContentLoaded", function() { setTimeout(tryUpdateEmail, 1000); // Initial delay of 1 second }); </script> </body> </html>

  2. In line 11, I have a paragraph with an email that I want to put into Chat form with id email. It could be any other element on your website where email exists. In my case, when I open the page, it looks like below:

    Zrzut ekranu 2024-08-28 o 10.11.39-20240828-081145.png

  3. To make it work, take the id of the div in which the Email test input exists:

    Zrzut ekranu 2024-08-28 o 10.13.27-20240828-081333.png

  4. In my case, it is id=”Email test” and it is visible in the code in line 25 as const emailInput = shadowRoot.querySelector('#Email\\ test input');

  5. If you have a field in a form, for example, with id=”EmailFieldContainer” you should change line 25 to:
    const emailInput = shadowRoot.querySelector('#EmailFieldContainer input');

The script takes the value from the paragraph with id=”email” and puts it with a delay (once Chat forms loads) into an input that exists in a div with id=”Email test”.

Related content