Wordpress & HubSpot Visitor Identification API

Developer Support APIs & Integrations
,
1

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");

}
2

Hey @jorge-gbs

Are you still working through this?

@prosa do you have any thoughts on this?

3

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

4

@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.

5

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!

6

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?

7

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>
8

Thank you so much for posting this!