# How to import code packages in the JavaScript column

**URL:** <https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466>\
**Category:** Ask for Help\
**Created:** [November 13, 2021, 4:05pm UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466 "2021-11-13T16:05:19Z")\
**Posts on this page:** 13\
**Page:** 2

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 19, 2022, 12:06am UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/21 "2022-03-19T00:06:00Z")

</div>

This is using Pug, Sass & CoffeeScript, not the “original” version of HTML, CSS & JavaScript so I don’t think that will work. I have integrated many CodePens to Glide before providing they use “original” HTML, CSS & JavaScript though, so that does work.

---

<div class="post-metadata">

**Author:** ![Manu\_Marea](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu_marea/32/21714_2.png) [@Manu\_Marea](https://community.glideapps.com/u/Manu_Marea)\
**Post date:** [March 19, 2022, 11:33am UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/22 "2022-03-19T11:33:48Z")

</div>

Ok yes it was just the first one i took ,  
i’m not so expert i have to say ,  
so even your explanation is learning so thanks,  
but,  
as far i understand

> > I have integrated many CodePens to Glide before providing they use “original” HTML, CSS & JavaScript though, so that does work.

Can i ask you to show me something ?

Have a nice weekend

![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/d/2daeaa8b5f19f0bc209d976c02bd6acb51b00b0a.gif)ᐧ

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 19, 2022, 12:44pm UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/23 "2022-03-19T12:44:37Z")

</div>

`https://codepen.io/derwinsadiwa/pen/obbjdx`

Here’s the adapted version of that Codepen.

`https://replit.com/@ThinhDinh/codepen-test#function.js`

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/a/cafed3b6029fe6c7d59b01c64c6c099641ad5cbc.jpeg)

---

<div class="post-metadata">

**Author:** ![Manu\_Marea](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu_marea/32/21714_2.png) [@Manu\_Marea](https://community.glideapps.com/u/Manu_Marea)\
**Post date:** [March 21, 2022, 6:59am UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/24 "2022-03-21T06:59:40Z")

</div>

oh great  
and how do you embed on Glide?

![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/d/2daeaa8b5f19f0bc209d976c02bd6acb51b00b0a.gif)ᐧ

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 21, 2022, 7:51am UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/25 "2022-03-21T07:51:50Z")

</div>

I used the result of that code in a webview component.

---

<div class="post-metadata">

**Author:** ![Manu\_Marea](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu_marea/32/21714_2.png) [@Manu\_Marea](https://community.glideapps.com/u/Manu_Marea)\
**Post date:** [March 21, 2022, 8:08am UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/26 "2022-03-21T08:08:34Z")

</div>

ok,  
i suppose that,  
would have been so great to see the platform enhanced so much  
to use that directly and not by means of a webview which  
with  
Rich text editor is the only way to enrich visually the app  
and going a little bit further with UI,  
thanks for sharing

---

<div class="post-metadata">

**Author:** ![Manu\_Marea](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/manu_marea/32/21714_2.png) [@Manu\_Marea](https://community.glideapps.com/u/Manu_Marea)\
**Post date:** [March 22, 2022, 6:33pm UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/27 "2022-03-22T18:33:08Z")

</div>

ps.  
this pen doesn’t use html and css right ?  
https://codepen.io/spacebarcounter-v2/embed/preview/Vwpadrv?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=Vwpadrv  
so basically we could achieve something more aesthetically pleasing , such as with  
images?Right ?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 23, 2022, 1:37am UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/28 "2022-03-23T01:37:02Z")

</div>

It’s written with Babel, so I doubt it works.

Nevertheless, just try playing around with Replit/Github using those Codepens. You never know which one will actually work.

---

<div class="post-metadata">

**Author:** ![slscustom.ru](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/slscustom.ru/32/77336_2.png) [@slscustom.ru](https://community.glideapps.com/u/slscustom.ru)\
**Post date:** [March 23, 2022, 5:24pm UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/29 "2022-03-23T17:24:48Z")

</div>

Very, very useful feature. But we have amazing and powerful Glide editor, but we still must do it like this [Loom | Free Screen & Video Recording Software](https://www.loom.com/share/b85d04b7931c4b478758a17a6feb7d35)  
Java, codepen, is this line code? Isnt it? I hope, in future, David giving us such useful instrument in a native!

---

<div class="post-metadata">

**Author:** ![AyS\_0908](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ays_0908/32/27349_2.png) [@AyS\_0908](https://community.glideapps.com/u/AyS_0908)\
**Post date:** [March 12, 2023, 3:35pm UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/30 "2023-03-12T15:35:25Z")

</div>

Hi @ThinhDinh,

I don’t know anything about javascript, but I have a good friend (chatgpt) who helped me to build a basic scrapper (similar to importxml in google sheet); the code (below) uses a library **“cheerio”** (…) and I wonder if I can use it into Glide Table, instead of keep using Google Sheet?

Thanks in advance

function scrapeUrls() {  
var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(“urlMetaData”);  
// Change the sheet name if necessary  
var urls = sheet.getRange(“A2:A”).getValues();  
Logger.log(urls);  
// Assumes the URLs are in column A, starting from row 2  
for (var i = 0; i \< urls.length; i++) {  
var url = urls[i][0];  
if (url) {  
var data = getWebsiteData(url);  
var title = data[0];  
var keywords = data[1];  
var description = data[2];  
var logo = data[3];  
sheet.getRange(i + 2, 2, 1, 4).setValues([[title, keywords, description, logo]]);  
// Write the extracted information back to the sheet  
}  
}  
}

function getWebsiteData(url) {  
var response = UrlFetchApp.fetch(url);  
// Make an HTTP request to the URL  
var content = response.getContentText();  
// Get the content of the response as a string

// Load cheerio library  
var $ = Cheerio.load(content);

// Scrape title, keywords, description and logo using cheerio methods  
var title = $(“title”).text();  
var keywords = $(“meta[name=‘keywords’]”).attr(“content”);  
var description = $(“meta[name=‘description’]”).attr(“content”);  
var logo = $(“link[rel=‘icon’]”).attr(“href”);

// Scrape new meta tags using cheerio methods  
var og\_image = $(“meta[property=‘og:image’]”).attr(“content”);  
var og\_title = $(“meta[property=‘og:title’]”).attr(“content”);  
var og\_description = $(“meta[property=‘og:description’]”).attr(“content”);  
var slogan = $(“meta[name=‘slogan’]”).attr(“content”);  
var twitter\_site = $(“meta[name=‘twitter:site’]”).attr(“content”);  
var fb\_app\_id = $(“meta[property=‘fb:app\_id’]”).attr(“content”);  
var fb\_admins = $(“meta[property=‘fb:admins’]”).attr(“content”);

Logger.log("Title: " + title);  
Logger.log("Keywords: " + keywords);  
Logger.log("Description: " + description);  
Logger.log("Logo: " + logo);

// Log and return new meta tag values  
Logger.log("OG Image: " + og\_image);  
Logger.log("OG Title: " + og\_title);  
Logger.log("OG Description: " + og\_description);  
Logger.log("Slogan: " + slogan);  
Logger.log("Twitter Site: " + twitter\_site);  
Logger.log("FB App ID: " + fb\_app\_id);  
Logger.log("FB Admins: " + fb\_admins);

return [title, keywords, description, logo, og\_image, og\_title, og\_description, slogan, twitter\_site, twitter\_creator, fb\_app\_id, fb\_admins];  
}

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 13, 2023, 12:08am UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/31 "2023-03-13T00:08:10Z")

</div>

I wouldn’t recommend having a scraper inside Glide Tables. I don’t know if you need this information to be extracted “live” or not, but if you just need it once, then using JS will not be good for you. Every user device will have to run that piece of code, assuming it’s working, and running that for every row in your table won’t be good.

---

<div class="post-metadata">

**Author:** ![AyS\_0908](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/ays_0908/32/27349_2.png) [@AyS\_0908](https://community.glideapps.com/u/AyS_0908)\
**Post date:** [March 13, 2023, 10:23am UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/32 "2023-03-13T10:23:45Z")

</div>

Ah ok, thank you for the advice.  
Then I should run it into gSheet and move the result to a Glide Table via Make, isn’t it?  
Thanks

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [March 13, 2023, 1:52pm UTC](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466/33 "2023-03-13T13:52:40Z")

</div>

You can do it in Glide Tables directly, if you run a call through Make and then use the API to write the result back to the correct row in Glide Tables.

[Previous page](https://community.glideapps.com/t/how-to-import-code-packages-in-the-javascript-column/34466.md?page=1)