Embed Dynamic Chart into Landing Page


#1

Greetings!

I’m trying to embed survey results and a dynamic chart created from our web site into a HubSpot landing page and suspect it involves the Custom HTML module. I’ve been searching for a good answer but my research hasn’t produced anything completely actionable. Therefore, I’d be most appreciative if someone could provide a little insight and point me in the right direction.

Thanks,
JJ


#2

@JJovick Have you looked into trying to embed it via an iframe?


#3

Hello @JJovick,

Its awsome to here, i am exited and want to be part of helping you to achieve, can you share some url what exacly you want to build, I thing other people using hubspot will also be benefited.

you can use either html module or hubl module, both of them works fine. we did use a plugin to plot a chart.

I am exited to see how you thinking to bring Dynamic chart


#4

Hi @pmanca,

Thanks for the idea. I thought that was the direction I would have to take and in talking to the management types they seem to recall that being part of the solution as well. I have it on good authority that this kind of solution has been implemented before and is relatively simple to do, unfortunately, I do not have a game plan to follow.

Hi @dan_hmonks,

I’ve taken steps toward exposing my staging site to the outside world for testing purposes. When that is done and I’ve confirmed that it is working, I will try adding an iframe to my landing page and use a URL with a query string to create the page within. That’s plan A anyway. I will also share the URL so that others can benefit or offer alternative solutions as well.

Thanks,
JJ


#5

@JJovick When you have a game plan and get started please let me know if you run into anything then.


#7

Hi @dan_hmonks,

Here’s the code I used to get dynamic survey results to display within the landing page:

<iframe id="assessment-results" src="http://www.yourdomain.com/Assessment/GetResults?surveyId={{ request.query_dict['surveyId'] }}" style="height:3000px; width:100%; margin:0; padding:0;" border="0" frameBorder="0" scrolling="no"></iframe>

The key to this solution is the following: {{ request.query_dict['surveyId'] }}. This bit of code looks for a surveyId in the calling URL’s querystring and amends it to the iframe src prior to rendering the page.

Thanks,
JJ


#8

Hello @JJovick, thanks for sharing, I will have look and will update you on this one, please accept my apology for delayed reply


#9

Hi @dan_hmonks,

No worries on the delayed response sir!

The original intent here was to integrate an LP with an HS contact form to a survey on our own server and then back to an LP that displayed the dynamic survey results. At the end of the day, I ended up replacing the contact form with another iframe that displayed a homegrown version of the contact form that saved the contact info locally and also sent it to HubSpot. This way I was able to easily tie the survey results to whomever filled out the contact info on the first LP.

Thanks,
JJ