Hubspot API with Clickable Item

[Jun22]

Hello Hubspot Masters,
Need some help hope someone can give me reference or similar tutorials to watch,

I have displayed the deals via API fetch from a serverless function,

const ul = document.getElementById('runners'),
 url = 'https://transforminator.com/_hcms/api/demo';

 const createNode = (element) => { return document.createElement(element); }
 const append = (parent, el) => { return parent.appendChild(el); }

 fetch(url)
 .then((response) => { return response.json(); })
 .then( data => {
 let runners = data.results; 
 return runners.map( runner => { 
 let li = createNode('li'), 
 span = createNode('span'); 
 span.innerHTML = `${runner.properties.dealname}`; 
 append(li, span); 
 append(ul, li);
 });
 })
 .catch( error => { console.log(error); })

Anyone can give me some idea and how can we add a link on each deal item being display from the code above that redirect to a new page and see more details like. (dealname, amount, etc.). Thanks

[Cereno-Deng]

Hi Neil,

I crare a test environment for you: https://codesandbox.io/s/strange-dhawan-ni1h6e . You need to change dealUrl and url paramenters for the pages you want to redirect. It might be impossible to fetch your website data from the outside, so I just put all content to the data.json file.

Cereno

[Jun22]

Hello Cereno,
Is it possible to fetch this page with json result like you have done on data.json
I did fetch the code from https://transforminator.com/_hcms/api/demo with inside code:

var axios = require('axios'); 

exports.main = (context, sendResponse) => {
 var config = {
 method: 'get',
 url: 'https://api.hubapi.com/crm/v3/objects/deals/?associations=company,contact',
 headers: { 
 'Authorization': 'Bearer PRIVATE_APP_KEY'
 }
 };

 axios(config)
 .then(function (response) {
 console.log(JSON.stringify(response.data));
 sendResponse({body: response.data, statusCode: 200}); 
 })
 .catch(function (error) {
 console.log(error);
 sendResponse({body: error, statusCode: 400});
 });

};

[Cereno-Deng]

Hi Neil,

That data.json is fixed for demo purpose. I think you can use your original code and just change something like this to make each deal items can be linked to deal pages.

span.innerHTML = ${runner.properties.dealname};

[Jun22]

Hello sir. thanks for the reply.
I tried to paste the code you gave and tweak the url see the image below. The item are all clickable now and the domain did /deal/dealID but page is “Not Found”
by this code sir:

const ul = document.getElementById('runners'),
 url = 'https://transforminator.com/_hcms/api/congrats';

 const your_deal_url = 'https://transforminator.com/deal-local';

 const createNode = (element) => { return document.createElement(element); }
 const append = (parent, el) => { return parent.appendChild(el); }

 fetch(url)
 .then((response) => { return response.json(); })
 .then( data => {
 let runners = data.results; 
 return runners.map( runner => { 
 let li = createNode('li'), 
 span = createNode('span'); 
 span.innerHTML = `<a href="${your_deal_url}/${runner.properties.hs_object_id}" rel="noopener noreferrer">${runner.properties.dealname}</a>`; 
 append(li, span); 
 append(ul, li);
 });
 })
 .catch( error => { console.log(error); }) 

I think we need an api call like to fetch clickevents sir and redirect to a new page do know something like that sir ?

[Cereno-Deng]

Hi Neil,

You need to use crm_object() of HubL on the “deal_local” page to get deal information. Remember to set that page is password protected.

If your HubSpot plan includes HubDB, it’s better to add a workflow to create/update HubDB deal table while any deals are changed. Then you can use HubL to get deal information from HubDB on public web pages.

Cereno

[Jun22]

Hello Cereno,
Is the data on JSON file will be dynamic if we add deals on hubspot does it will automatically be added to the json or still need to update the “data.json” ?