Wordpress & HubSpot Visitor Identification API

[jorge-gbs]

Hello,

I am trying to add the Vistior Identification API to my wordpress site that uses the Hubspot Wordpress Plugin.

I was adding a custom WP Plugin to handle this small addon. I think I am close to getting it working as I am able to retrive the token on the server and pass it to the client in JS.

Where I seem to be getting stuck on is getting the Chat to accept the loadImmediately False to delay the loading of the chat until I receive the token.

I think my issue is a timing issue when Wordpress loads the scripts but maybe I am wrong. Here is the JS that should be loading initially to stop the chat from loading. I have tried loading this from through WP Actions on init, wp_enqueue_scripts,wp_head, and wp_footer.

Any idea what I am missing?

function onConversationsAPIReady() {
    console.log(`HubSpot Conversations API: ${window.HubSpotConversations}`);
	window.hsConversationsSettings = {
                loadImmediately: false,
            };
	console.log(window.hsConversationsSettings.loadImmediately);
  }
  
   /*
   If external API methods are already available, use them.
  */
  if (window.HubSpotConversations) {
    onConversationsAPIReady();
  } else {
    /*
      Otherwise, callbacks can be added to the hsConversationsOnReady on the window object.
      These callbacks will be called once the external API has been initialized.
    */
    window.hsConversationsOnReady = [onConversationsAPIReady];
  }
  
	console.log("Include Stop Load");

	console.log('<?php echo $response ?>');
	console.log('<?php echo $current_user->user_email?>');
	window.hsConversationsSettings = {
		identificationEmail: '<?php echo $current_user->user_email?>',
		identificationToken: '<?php echo $response ?>'
	};
	window.hsConversationsOnReady = [
                () => {
                    console.log('OnReady');
					window.HubSpotConversations.widget.load();
                },
            ];
    

add_action( 'wp_head', 'Hubspot_Chat_Stop_Load');
add_action( 'wp_footer', 'Hubspot_Chat_User_Verify');


function Hubspot_Chat_User_Verify () { 

$current_user = wp_get_current_user(); 
if ( $current_user->user_email != "" ) {
	$apiKey = "<<API KEY>>"; //API Key from Hubspot
	
	$email = $current_user->user_email;
	$fn = $current_user->user_firstname;
	$ln = $current_user->user_lastname;

	/* https://packagist.org/packages/hubspot/api-client */
	$curl = curl_init();
	
	curl_setopt_array($curl, array(
		CURLOPT_URL => "https://api.hubapi.com/conversations/v3/visitor-identification/tokens/create?hapikey=".$apiKey,
		CURLOPT_RETURNTRANSFER => true,
		CURLOPT_ENCODING => "",
		CURLOPT_MAXREDIRS => 10,
		CURLOPT_TIMEOUT => 30,
		CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
		CURLOPT_CUSTOMREQUEST => "POST",
		CURLOPT_POSTFIELDS => "{\"email\":\"".$email."\",\"firstName\":\"".$fn."\",\"lastName\":\"".$ln."\"}",
		CURLOPT_HTTPHEADER => array(
			"accept: application/json",
			"content-type: application/json"
		),
	));

	$response = curl_exec($curl);
	$err = curl_error($curl);

	curl_close($curl);

	include(plugin_dir_path( __DIR__ ) . "hubspot-chat-user-verify/include.php");

}
}

function Hubspot_Chat_Stop_Load () {
	include(plugin_dir_path( __DIR__ ) . "hubspot-chat-user-verify/stopLoad.php");
	
}

[jorge-gbs · Accepted solution]

In case this helps anyone. I figured it out. 

My code was correct. Just missing in the JS the Token I was passing the entire array including Keys instead of just the token.

The line read: 

	console.log('<?php echo $response ?>');
	console.log('<?php echo $current_user->user_email?>');
	window.hsConversationsSettings = {
		identificationEmail: '<?php echo $current_user->user_email?>',
		identificationToken: '<?php echo $response ?>'
	};
	window.hsConversationsOnReady = [
                () => {
                    console.log('OnReady');
					window.HubSpotConversations.widget.load();
                },
            ];
    

It should read:

<script type="text/javascript" id="passUserID">
	window.hsConversationsSettings = {
		loadImmediately: false,
		identificationEmail: '<?php echo $current_user->user_email?>',
		identificationToken: '<?php echo $response['token'] ?>'
	};
	window.hsConversationsOnReady = [
                () => {
                    console.log('OnReady');
					window.HubSpotConversations.widget.load();
                },
            ];
    
</script>

[dennisedson]

Thank you so much for posting this!

[Den]

It's dissapointing that support of this API is not even planned for implementation in HubSpot WP plugin (we enquired).

@dennisedson  can you please get HubSpot devs to provide working snippets and how-to for implementing this API in the presence of HubSpot WP plugin?

[jorge-gbs]

@dennisedson Any help on this would be greatly appriciated. I wouldn't mind publishing this on Github for public use as it seems like a useful piece of code for anyone running wordpress and Hubspot. Thanks in advance.

[dennisedson]

Ah @Jorge-gb
Sorry I didn't see this still out there. I will look more closely tomorrow.
@Mike_Eastwood is a real pro an might have an idea as well, though!

[dennisedson]

Hey @jorge-gbs 

Are you still working through this?

@prosa  do you have any thoughts on this?

[jorge-gbs]

Hello, Yes I still am trying to figure it out.