I have worked in the chatbot widget code in a separte html file and applying the payload as per doc

Channels
1

I followed the steps from the below link. I have applied the payload in chatbot widget code in a html file , but i faced an regex issue . I have mentioned the code below the link and issue

Hereis my code

<p id = "username">pradeep kumaresan</p>

<p id="useremail" name="useremail">pradeep.kumaresan@test.com</p>

issue

image
image1884×553 93.6 KB

1 Like
2

Hey @pradeepkumaresan,
Can you please share the whole HTML code snippet with me?

4 
<p id = "username">pradeep kumaresan</p>

<p id="useremail" name="useremail">pradeep.kumaresan@test.com</p>
1 Like
5

@pradeepkumaresan I need the whole code snippet, like this:

<html>
<head>

</head>
<body>
  
 <p id = "username">yellow.ai Community</p>
 <p id="useremail" name="useremail">community@yellow.ai</p>

<script type="text/javascript">
    let name = document.getElementById("username").innerText; // parse elements
    let email =  document.getElementById("useremail").innerText;

    console.log("Test data: ", name, email); // pass variables using payload object to window.ymConfig
    window.ymConfig = {"bot":"YOUR_BOT_ID_HERE","host":"https://cloud.yellowmessenger.com","payload":{"name": name,"email": email},"partiallyOpen":false,"alignRight":"right"};(function () {var w=window,ic=w.YellowMessenger;if("function"===typeof ic)ic("reattach_activator"),ic("update",ymConfig);else{var d=document,i=function(){i.c(arguments)};function l(){var e=d.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.yellowmessenger.com/plugin/widget-v2/latest/dist/main.min.js";var t=d.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}i.q=[],i.c=function(e){i.q.push(e)},w.YellowMessenger=i,w.attachEvent?w.attachEvent("onload",l):w.addEventListener("load",l,!1)}})();
</script>

</body>
</html>
6 
<html>
<head>

</head>
<body>
    <p id = "username">pradeep kumaresan</p>
    <p id="useremail" name="useremail">pradeep.kumaresan@test.com</p>
   
</body>

<script type="text/javascript">
    let name = document.getElementById("username").innerText;
    let email =  document.getElementById("useremail").innerText;
    let coordinates = {latitude:"13.087840" , longitude :"80.278470"} ;

    console.log(name,email,coordinates)


    window.ymConfig = { bot: 'x1650273048873', host: 'https://cloud.yellow.ai' , "payload":{"name":name , "email":email , coordinates :coordinates} };  (function () {var w=window,ic=w.YellowMessenger;if("function"===typeof ic)ic("reattach_activator"),ic("update",ymConfig);else{var d=document,i=function(){i.c(arguments)};function l(){var e=d.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.yellowmessenger.com/plugin/widget-v2/latest/dist/main.min.js";var t=d.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}i.q=[],i.c=function(e){i.q.push(e)},w.YellowMessenger=i,w.attachEvent?w.attachEvent("onload",l):w.addEventListener("load",l,!1)}})();
  </script>
</html>
1 Like
7

Hey @pradeepkumaresan,
I see you’ve missed quotes while passing the data to the payload. It should look like this:

    window.ymConfig = { bot: 'x1650273048873', host: 'https://cloud.yellow.ai' , "payload":{"name":name , "email":email , "coordinates" :coordinates} };  (function () {var w=window,ic=w.YellowMessenger;if("function"===typeof ic)ic("reattach_activator"),ic("update",ymConfig);else{var d=document,i=function(){i.c(arguments)};function l(){var e=d.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.yellowmessenger.com/plugin/widget-v2/latest/dist/main.min.js";var t=d.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}i.q=[],i.c=function(e){i.q.push(e)},w.YellowMessenger=i,w.attachEvent?w.attachEvent("onload",l):w.addEventListener("load",l,!1)}})();

I’ve tested the code in my bot and it’s working fine now.

Screenshot 2022-05-10 at 12.43.08 PM
Screenshot 2022-05-10 at 12.43.08 PM2880×1558 424 KB

8

Can you please share the code , It’s not working for me. I have checked the payload also

1 Like
9

Sure, here you go:

<html>
<head>

</head>
<body>
    <p id = "username">pradeep kumaresan</p>
    <p id="useremail" name="useremail">pradeep.kumaresan@test.com</p>
   
</body>

<script type="text/javascript">
    let name = document.getElementById("username").innerText;
    let email =  document.getElementById("useremail").innerText;
    let coordinates = {latitude:"13.087840" , longitude :"80.278470"} ;

    console.log(name,email,coordinates)


    window.ymConfig = { bot: 'x1620704465668', host: 'https://cloud.yellow.ai' , "payload":{"name":name , "email":email , "coordinates" :coordinates} };  (function () {var w=window,ic=w.YellowMessenger;if("function"===typeof ic)ic("reattach_activator"),ic("update",ymConfig);else{var d=document,i=function(){i.c(arguments)};function l(){var e=d.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.yellowmessenger.com/plugin/widget-v2/latest/dist/main.min.js";var t=d.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}i.q=[],i.c=function(e){i.q.push(e)},w.YellowMessenger=i,w.attachEvent?w.attachEvent("onload",l):w.addEventListener("load",l,!1)}})();
  </script>
</html>
10

I getting the error like Range out of order in character class (at main.min.js:2:12673). Please check it.
Can you please confirm the CDN
https://cdn.yellowmessenger.com/plugin/widget-v2/latest/dist/main.min.js

11

Hi @Pratik I’m also facing the same issue.
BOT is not opening, i tried both LIVE / DEVELOPMENT code.

Same code you shared is also not working.
Please help us on this.

image
image1879×949 159 KB

1 Like
12

@senthil.vasan @pradeepkumaresan can you please share bot access with me at pratik@yellow.ai?
Need to inspect the bot logs before I can help you further.

13

@Pratik I gave access to pratik@yellow.ai. Hope you got it.
if not let me know.

Please help us on fixing the issue.

14

@Pratik , It’s a blocker for us.
Please sort out the issue.

1 Like
15

@pradeepkumaresan @senthil.vasan As Sai Singaram must have communicated to you earlier, this seems like a browser issue. Because this code works well on the Firefox browser but not on Chrome. We’re trying to get this issue resolved ASAP.
Also, I want to let you know that in order to fetch the data from the parent interface (here HTML page) data should be displayed on the page.

16

@pradeepkumaresan @senthil.vasan
Here is the updated code snippet which works well with all browsers

<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>
<body>
    <p id = "username">pradeep kumaresan</p>
    <p id="useremail" name="useremail">pradeep.kumaresan@test.com</p>
   
</body>

<script type="text/javascript">

    let name = document.getElementById("username").innerText;
    let email =  document.getElementById("useremail").innerText;
    let coordinates = {latitude:"13.087840" , longitude :"80.278470"} ;

    console.log(name,email,coordinates)


    window.ymConfig = { bot: 'x1620704465668', host: 'https://cloud.yellow.ai' , "payload":{"name":name , "email":email , "coordinates" :coordinates} };  (function () {var w=window,ic=w.YellowMessenger;if("function"===typeof ic)ic("reattach_activator"),ic("update",ymConfig);else{var d=document,i=function(){i.c(arguments)};function l(){var e=d.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.yellowmessenger.com/plugin/widget-v2/latest/dist/main.min.js";var t=d.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)}i.q=[],i.c=function(e){i.q.push(e)},w.YellowMessenger=i,w.attachEvent?w.attachEvent("onload",l):w.addEventListener("load",l,!1)}})();
  </script>
</html>
1 Like