Dynamic Button URL based on custom Property?

Developer Support APIs & Integrations
1

Hi there.

Context:

I’m currently installing a few lines of jQuery on several non-hubspot pages. The pages have a hubspot form with a hidden field that the jQuery should automatically populate with the page URL upon form submission.

The URL should then be stored in a contact property called registration_backlink.

Problem:

The logic is to use the contact property called registration_backlink in order to create dynamic buttons in emails so each person is referred to register and submit their details on an updated version of the page they visited before. What’s the best way to go about doing this?

An alternative to the whole process would be to enroll contacts into an active list based on the URL they came from and send them an email with smart content based on list city but as we’re running hundreds of events we would be running out of active lists!

Ideal Process/Example:

User visits https://ww1.qstopmba.com/events/qs-world-mba-tour/europe/st-petersburg
User clicks Green button and form pops up.
User fills in form and jQuery fires by adding https://ww1.qstopmba.com/events/qs-world-mba-tour/europe/st-petersburg into the contact property registration_backlink
When event details are published, User receives an email with a dynamic URL button, in this case linking to https://ww1.qstopmba.com/events/qs-world-mba-tour/europe/st-petersburg

Notes:

This is a non-hubspot page, but we use a hubspot form.
The link above is a test-website and may appear as usafe to visit on some browsers
The jQuery we’re using for this is:

var getURL = window.location.href;
(‘.hs_registration_backlink.hs-registration_backlink.hs-fieldtype-text.field.hs-form-field’).val((‘.hs_registration_backlink.hs-registration_backlink.hs-fieldtype-text.field.hs-form-field’).val()+getURL);

2

Hi @aaaaandrei, did you see my previous reply here: jQuery to get page URL in hidden field?

I tested the code on my site and it worked properly:

$(document).ready(function(){
	var getURL = window.location;
 	$("input[name='url']").val(getURL).change();
});

Lightshot

f09dbf9ebe1a0933fc65531cba30a77ab194e6a6.png
f09dbf9ebe1a0933fc65531cba30a77ab194e6a6.png897×358 27.1 KB

Screenshot

Captured with Lightshot

3

You can also place the code above inside the onFormSubmit method instead of document ready as per these docs: https://developers.hubspot.com/docs/methods/forms/advanced_form_options

4

Hi @Connor_Barley thanks for the reply!
Just seen it thanks for that.

That’s how I initially coded it but opted for the code I mentioned above as it was suggested to us by our on-boarding HS manager.

However, this ticket is a little different than the previous one. It has to do with dynamic urls for buttons instead of fixed ones. so Click Here! should take contacts to the url in their contact property.

Do personalisation tokens work inside links?

5

Oh, got it @aaaaandrei, my fault!

Yes so if you are sending an email to the user, you should be able to use a custom property in that email with the URL that they filled out the form on that you set with jquery. So if they filled out the form and their property was properly set, in the email you can use that property by inserting a personalization token the normal way: https://knowledge.hubspot.com/articles/kcs_article/cos-general/how-to-use-personalization-with-your-content, or write in the source code:

{{ contact.internal_name_of_property_here }}. For me that is: {{ contact.url }}

6

Amazing, thanks @Connor_Barley.
I tested it and it works!

7

Awesome! Glad to help @aaaaandrei
grinning.png