# HUBL in Javascript code

**URL:** <https://community.hubspot.com/t/hubl-in-javascript-code/12597>\
**Category:** APIs & Integrations\
**Tags:** developer-tools\
**Created:** [January 9, 2019, 1:18am UTC](https://community.hubspot.com/t/hubl-in-javascript-code/12597 "2019-01-09T01:18:55Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![ruann](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ruann/32/2679_2.png) [@ruann](https://community.hubspot.com/u/ruann)\
**Post date:** [January 9, 2019, 1:18am UTC](https://community.hubspot.com/t/hubl-in-javascript-code/12597/1 "2019-01-09T01:18:55Z")

</div>

Hello,

I would just want to ask if executing HUBL code in javascript is possible?

Thank you!

---

<div class="post-metadata">

**Author:** ![cbarley](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/cbarley/32/82559_2.png) [@cbarley](https://community.hubspot.com/u/cbarley)\
**Post date:** [January 9, 2019, 4:39pm UTC](https://community.hubspot.com/t/hubl-in-javascript-code/12597/2 "2019-01-09T16:39:16Z")

</div>

HI [@ruanngabriel](https://community.hubspot.com/u/ruanngabriel), what is your use-case here? You can certainly use HubL to inject values into a javascript function as long as this ends up being valid JS.

For a very simple example, if I want to log the value of my name to the console, I can do something like this:

```auto
{% set myName = "Connor" %}

{% if myName %}
<script type="text/javascript">
 console.log("{{ myName }}")
</script>
{% endif %}

```

Here are two screenshots that show this works:

![](https://d2qpr2jzcazej7.cloudfront.net/original/3X/4/f/4fbe3bb7f1b9d131ef0e59c8958122a36c467257.png) [Lightshot](https://prnt.sc/m4zteu)

 ![34cef3542105324e9dcc06ed091133e022b92669.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/3/4/34cef3542105324e9dcc06ed091133e022b92669.png)

### [Screenshot](https://prnt.sc/m4zteu)

Captured with Lightshot

![](https://d2qpr2jzcazej7.cloudfront.net/original/3X/4/f/4fbe3bb7f1b9d131ef0e59c8958122a36c467257.png) [Lightshot](https://prnt.sc/m4ztns)

 ![17f36f979e2d7d7ef258292af729daa2bcea343d.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/1/7/17f36f979e2d7d7ef258292af729daa2bcea343d.png)

### [Screenshot](https://prnt.sc/m4ztns)

Captured with Lightshot

Let me know if I’m misunderstanding you and I’d be happy to take a further look!

---

<div class="post-metadata">

**Author:** ![ruann](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ruann/32/2679_2.png) [@ruann](https://community.hubspot.com/u/ruann)\
**Post date:** [January 10, 2019, 1:15am UTC](https://community.hubspot.com/t/hubl-in-javascript-code/12597/3 "2019-01-10T01:15:48Z")

</div>

How about vice-versa?  
hubl code inside external javascript file?

Thanks!

---

<div class="post-metadata">

**Author:** ![cbarley](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/cbarley/32/82559_2.png) [@cbarley](https://community.hubspot.com/u/cbarley)\
**Post date:** [January 10, 2019, 2:42pm UTC](https://community.hubspot.com/t/hubl-in-javascript-code/12597/4 "2019-01-10T14:42:21Z")

</div>

Hi [@ruanngabriel](https://community.hubspot.com/u/ruanngabriel) external in what way? You attach a JS file hosted externally with HubL in it to a HubSpot hosted page? If so, no you cannot do that. You can write HubL inside of Design Manager hosted JS files, custom modules, and the head HTML/ footer HTML of pages/content settings but that is it.

---

<div class="post-metadata">

**Author:** ![ruann](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ruann/32/2679_2.png) [@ruann](https://community.hubspot.com/u/ruann)\
**Post date:** [January 10, 2019, 10:52pm UTC](https://community.hubspot.com/t/hubl-in-javascript-code/12597/5 "2019-01-10T22:52:57Z")

</div>

External JS hosted in HubSpot. Like I’m writing the code in Design Manager.

---

<div class="post-metadata">

**Author:** ![cbarley](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/cbarley/32/82559_2.png) [@cbarley](https://community.hubspot.com/u/cbarley)\
**Post date:** [January 10, 2019, 10:54pm UTC](https://community.hubspot.com/t/hubl-in-javascript-code/12597/6 "2019-01-10T22:54:57Z")

</div>

Yep, that’s possible!

---

<div class="post-metadata">

**Author:** ![mansigovani](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mansigovani/32/43872_2.png) [@mansigovani](https://community.hubspot.com/u/mansigovani)\
**Post date:** [October 4, 2019, 2:16pm UTC](https://community.hubspot.com/t/hubl-in-javascript-code/12597/7 "2019-10-04T14:16:13Z")

</div>

Hello @cbarley, @ruann  
I am trying something similar. So can you please share one example of how to use HUBL code inside \<script\> tag.

Thank you for your help in advance!  
Mansi

---

<div class="post-metadata">

**Author:** ![louischausse](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/louischausse/32/18067_2.png) [@louischausse](https://community.hubspot.com/u/louischausse)\
**Post date:** [January 7, 2020, 7:26pm UTC](https://community.hubspot.com/t/hubl-in-javascript-code/12597/8 "2020-01-07T19:26:40Z")

</div>

@mansigovani Did you find out how? I’d like to use it in a \<script\> tag as well.

Thanks

---

<div class="post-metadata">

**Author:** ![mansigovani](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mansigovani/32/43872_2.png) [@mansigovani](https://community.hubspot.com/u/mansigovani)\
**Post date:** [January 7, 2020, 8:58pm UTC](https://community.hubspot.com/t/hubl-in-javascript-code/12597/9 "2020-01-07T20:58:36Z")

</div>

@louischausse, no I didn’t find any solution on how to use HUBL code inside \<script\> tag.

---

<div class="post-metadata">

**Author:** ![louischausse](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/louischausse/32/18067_2.png) [@louischausse](https://community.hubspot.com/u/louischausse)\
**Post date:** [January 9, 2020, 10:19pm UTC](https://community.hubspot.com/t/hubl-in-javascript-code/12597/10 "2020-01-09T22:19:59Z")

</div>

@mansigovani

Are you working in a module or directly in a template or elsewhere. If you work in a module you can only use hubl in the hubl + html panel.

If you are coding elsewhere just tell me where and I’ll try to help you

---

<div class="post-metadata">

**Author:** ![mansigovani](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mansigovani/32/43872_2.png) [@mansigovani](https://community.hubspot.com/u/mansigovani)\
**Post date:** [January 13, 2020, 6:16pm UTC](https://community.hubspot.com/t/hubl-in-javascript-code/12597/11 "2020-01-13T18:16:06Z")

</div>

@louischausse ,  
I am creating this custom Customer Review Form. Now on Submit, I would like to add the review to my HubDB table as a new row.

Do you have any ideas on how to implement that?

Thank you in advance for your help!

 ![screenshot-app.hubspot.com-2020.01.png](https://d2qpr2jzcazej7.cloudfront.net/original/2X/7/7f477fb2a1879639b20fddcfcc271911cf1de4ae.png)

---

<div class="post-metadata">

**Author:** ![louischausse](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/louischausse/32/18067_2.png) [@louischausse](https://community.hubspot.com/u/louischausse)\
**Post date:** [January 13, 2020, 8:29pm UTC](https://community.hubspot.com/t/hubl-in-javascript-code/12597/12 "2020-01-13T20:29:16Z")

</div>

ok this is a much wider problem than just using hubl to javascript. I have never done something like this but did you take a look at hubDB API documentation : [https://developers.hubspot.com/docs/methods/hubdb/v2/create\_row](https://developers.hubspot.com/docs/methods/hubdb/v2/create_row)

If that doesn’t help I would recommend opening a new community forum discussion with your last comment or ask your question in the HubSpot Developer Slack [Join the HubSpot Developer Slack Community](https://designers.hubspot.com/slack)

---

<div class="post-metadata">

**Author:** ![mansigovani](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mansigovani/32/43872_2.png) [@mansigovani](https://community.hubspot.com/u/mansigovani)\
**Post date:** [February 21, 2020, 10:16pm UTC](https://community.hubspot.com/t/hubl-in-javascript-code/12597/13 "2020-02-21T22:16:09Z")

</div>

@louischausse , thanks for referring me to Slack. I was able to find the solution to my query there. It was by using **Zapier’s Webhooks** to insert values to my HUBDB.

---

<div class="post-metadata">

**Author:** ![louischausse](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/louischausse/32/18067_2.png) [@louischausse](https://community.hubspot.com/u/louischausse)\
**Post date:** [February 22, 2020, 12:30pm UTC](https://community.hubspot.com/t/hubl-in-javascript-code/12597/14 "2020-02-22T12:30:42Z")

</div>

Hi @mansigovani  
You are welcome!  
You can mark my reply as a solution if you are satisfied or ask me anything else  
Best

---

<div class="post-metadata">

**Author:** ![scokic](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/scokic/32/27089_2.png) [@scokic](https://community.hubspot.com/u/scokic)\
**Post date:** [October 25, 2021, 8:59am UTC](https://community.hubspot.com/t/hubl-in-javascript-code/12597/15 "2021-10-25T08:59:47Z")

</div>

Thanks a lot! This is exactly what I needed for generating JS objects from HubL data when creating custom functions and using API! 😀

---

<div class="post-metadata">

**Author:** ![OBojahr](https://avatars.discourse-cdn.com/v4/letter/o/7c8e57/32.png) [@OBojahr](https://community.hubspot.com/u/OBojahr)\
**Post date:** [August 18, 2023, 7:59am UTC](https://community.hubspot.com/t/hubl-in-javascript-code/12597/16 "2023-08-18T07:59:47Z")

</div>

Maybe a hint that looks more standardized and hence cooler is using the script type “application/json”:

module.html

```lia-code-sample
<script id="data" type="application/json"> 
 {
 "country_filter": "{{ module.country_filter }}"
 }
</script>

```

Then you can use this and other variables in your Javascript module file, which you should consider best practice, since it increases readability of your code quite a bit and allows unit testing and other state of the art best-practices.  
module.js

```lia-code-sample
const data = JSON.parse(document.getElementById("data").text)
console.log('From HubL generation', data.country_filter)

```

---

<div class="post-metadata">

**Author:** ![louischausse](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/louischausse/32/18067_2.png) [@louischausse](https://community.hubspot.com/u/louischausse)\
**Post date:** [August 25, 2023, 3:31pm UTC](https://community.hubspot.com/t/hubl-in-javascript-code/12597/17 "2023-08-25T15:31:47Z")

</div>

[@BérangèreL](https://community.hubspot.com/t5/user/viewprofilepage/user-id/230185) this should be marked as a solution. This is so clean and powerful!!