Clerk.io integration

[NoZebra]

Clerk.io is a product recommendation tool that use embed codes on web and in e-mail to recommend products. Im trying to setup an integration to create HubSpot freindly embedcodes. 

I have gotten the following in writing from Clerk.io. Anyone that can help us out? 

"Due to the way Clerk.io works, 1 embedcodes HTML can generate completely different

products if opened today vs in one week. However most browsers and email clients will cache an image, and show the cached version the next time the exact same link is shown.

To avoid this, and be able to always show the correct products, we need a tag / cachebuster that will be rendered into something that is unique for each campaign, so the same embedcodes can be included

and sent in many emails.

An example (simplified):

<img src="https://api.clerk.io/embed?key=123&email=slo@clerk.io&cachebuster=07oct2020-10:10">

In MailChimp we use *|CAMPAIGN_UID|* which is generated into the ID of the campaign that is always unique. 

A simple timestamp or similar will also work though."

Thanks in advance.

[olzen90]

The {{ unixtimestamp }} does sound like what I need - I am not completely sure how Custom Modules work though. Is it something I can install in HubSpot? Sorry, I am still a bit of a noob 😉 

After all I need this for emails. 

[olzen90]

Hi all. Stefan from Clerk.io! 

Just to elaborate on Jonchim's example - there is no need for additional CSS, HTML or JS in the emails.

A full 1-product email recommendation from Clerk consists of two parts, both containing an API call:
1. A link in an <a> element with a call to campaigns/click

2. An image with a link to campaigns/embed - this will be the actual visual representation of the product. The campaigns/embed call returns a fully rendered image based on HTML and CSS in the Clerk.io backend.

So an example embedcode could be:

<a href="https://api.clerk.io/click?key=123&email=slo@clerk.io&cachebuster=07oct2020-10:10">

   <img src="https://api.clerk.io/embed?key=123&email=slo@clerk.io&cachebuster=07oct2020-10:10"/>

</a>

The reason why we need a cachebuster is that the above embed code can be included in a basic HubSpot template and thus be included in maybe 15 emails over the course of the month. However, if most browsers identify the same image link being shown again, they will see a cached version. 

Imagine that the customer sees product X in the first email they get. Then they get a new email a week after, and this time, Clerk.io would serve product Y. But without a cachebuster, the link is the same, so the result is cached, meaning the browser would still show product X.

So we simply need any sort of unique text that can be generated automatically, the same way you can insert the email address with {{ contact.email }}. I imagine something like {{ timestamp }}.

Does that exist in HubSpot?

[dennisedson]

hello @olzen90 ! 

Thanks for stepping into the community!

{{ unixtimestamp }} would probably suit this need, but it is unline a personalization token.  It will need to be added to the custom module as @jonchim  has illustrated

[jonchim]

Hey @NoZebra,

No problem!

So if it is for email you can build a custom module specifically to use for email templates. Not sure if it needs any css, javascript or is this code all that is needed? 
<img src="https://api.clerk.io/embed?key=123&email=slo@clerk.io&cachebuster=07oct2020-10:10">

If that is all that is needed once you're in the email template drag and drop builder you can click on the + more on the left hand side. It'll give you more options, if you look at the screenshot there's a custom moduel for clerkio, that's just an example I created. Let me know if this helps, or if this is not what you're looking for. 

[dennisedson]

Thanks for helping out here @jonchim !

@NoZebra , thanks for additional info!

I want to confirm this is what you are trying to do (I am slow 😉 )

1. You send an email to me which contains an image
2. I look at the email today 
3. I open the email again in a week.  The link in the email should contain a different query param so that we make sure it isn't a cached image being displayed

If that is the case, I don't know if it is possible 🤔 .  Javascript is a no no for email.  If this is possible, I would love to see an example of how they made this work with email!  

[jonchim]

Hey there, If this is for an email embed, a custom module will definitley be need since the HTML support is very limited in the drag and drop builder. I'm not entirely sure on the cache concern, we would need a bit more details.

[NoZebra]

Hi @jonchim ! 

Thank you for your reply 🙂 

Its indeed for an e-mail, but we are not using the drag and drop builder for the same reason. What kind og details would you be looking for? 

[dennisedson]

Hi @NoZebra ,

We would need to know more about the setup.  If I am reading this correctly, what you are wanting to do is add an embed code with a unique "cache-busting" parameter onto a HubSpot page.

If that is correct, will you be making a custom module for  this? 

Are you needing development help or will you be building this in house?

@jonchim , @alyssamwilie , @Anton if I am reading the question correctly, I believe this can be solved with some hubl :).  What do you all think?

Thanks all!

[NoZebra]

Hi @dennisedson  ! 

Thank you for your reply. Yes we are trying to add an embed code with a unique cache-busting parameter, but not on a HubSpot page, but in a HubSpot e-mail. We use clerk to send personal recommendations and add these to our newsletters connecting with our subscribers. But we need the cachebuster to make sure we can link the clerk visitor ID with the HubSpot user correct.

Not sure if that makes sense to you? 🙂