Binding server connect variable inside Javascript

1

Hi everybody,
it will be a simple question, but not for a dummy like me.

I have a reserved area where people login and in the main page I have a query to have the name and the email of the logged person.

Now I would like to put Name and email of the Logged person inside the following javascript:

<script type=“text/javascript”>
var Tawk_API=Tawk_API||{};
Tawk_API.visitor = {
name : ‘visitor name’,
email : 'visitor@email.com’
};
var Tawk_LoadStart=new Date();
<!-- rest of the tawk.to widget code --> </script>

thank you very much

2

@Teodor please help me … I know I m pain in the ass :wink:

3

Hmm that is a tough one, I’m not sure if we process expressions in script blocks, you can try something like:

<script type=“text/javascript”>
  var Tawk_API=Tawk_API||{};
  Tawk_API.visitor = {
    name : ‘{{serverconnect.data.visitor_name}}’,
    email : '{{serverconnect.data.email}}’
  };
  var Tawk_LoadStart=new Date();
  // rest of the tawk.to widget code 
</script>

Just make sure your expression is valid and enclosed within {{ and }}

Maybe @patrick should advise as well.

4

thank you very much @George but adding {{serverconnect…}} gives me as name exactly {{serverconnect…}} …

5

I forgot to mention that the script block should be inside the body tag, so it gets evaluated, and not in the head.

6

it is inside the body
maybe the fact to be inside script tag makes problem…

7

Yes I think so, I don’t think we process javascript blocks for expressions, but @patrick can confirm it later on

1 Like
8

thank you very much George.

9

Script tags and Style tags are not processed by App Connect. App Connect replaces the content when the DOM is ready, the javascript in the Script tag is then already executed.

10

then there is no way to are these two variabile to the script ?

11

Depending on where the data is coming from, lets say it comes from a serverconnect component. You want to create a javascript function on your site first like

function setUser() {
  Tawk_API.setAttributes({
    'name'  : dmx.app.data.serverconnect.data.visitor_name,
    'email' : dmx.app.data.serverconnect.data.email
  }, function(error){});
}

All data you access in expressions can also be accessed in JavaScript under dmx.app.data, so if your expression was {{serverconnect.data.visitor_name}} then you can access it as dmx.app.data.serverconnect.data.visitor_name in JavaScript.

You have to wait until App Connect has the data loaded, so on the serverconnect component listen to the load or success event and to trigger the function like

<dmx-serverconnect id="serverconnect" url="myaction.php" onsuccess="setUser()"></dmx-serverconnect>

I hope I didn’t make a mistake in my code, it is late here :slight_smile:

7 Likes
12

Yes it is late here too… thank you very much you are very kind !

13

You can also parse expressions directly using dmx.parse("serverconnect.data.visitor_name"), that is perhaps easier then accessing the data directly under dmx.app.data. You can then also use the formatters in the expressions.

3 Likes
14

I have to put it on the name piace inside the script ?

15 
function setUser() {
  Tawk_API.setAttributes({
    'name'  : dmx.parse('serverconnect.data.visitor_name'),
    'email' : dmx.parse('serverconnect.data.email')
  }, function(error){ console.error(error); });
}

I’ve used the setAttribute of the Tawk API since I think the data will be available after the Tawk API finished loading, see documentation at https://www.tawk.to/javascript-api/. There could be a racing condition between the ajax call of the Server Connect and the Tawk API loading, if the Server Connect loaded before the Tawk API then the setAttribute will probably not work.

16

Did @patrick 's recomendation work?

17

Hi @patrick and @t11

First of all a big thank to Patrick for this extra support.

About the question of t11: have to say that this things it is too complex for my knowledge !
I made some try but for sure I did something not right. The fact is that I have not experience at all with javascript to manage something like that.

Now I m studing what Patrick wrote and the tawk.to api… let’s see if I can do something. In case I will keep you updated!!

18

Following with great interest as I have chat integration on a want list from a customer

1 Like
19

this sort of thing is what we need more please.
can you guys give more examples on app connect API. in the documentation

20

HI patrick,

is their any plans to allow variable binding to work within the script tags of the html?

Kind regards,

johnny hajjar