Live Chat

We'll need to share your messages (and your email address if you're logged in) with our live chat provider, Drift. Here's their privacy policy.

If you don't want to do this, you can email us instead at contact@anvil.works.

Using Javascript libraries from Anvil apps

Are you new here?

Anvil is a tool for building full-stack web apps with nothing but Python and a drag-and-drop designer. Learn more on our website, or sign up and try it yourself -- it's free!

Importing a Javascript library into an Anvil app

You can do almost everything in Anvil from Python. But sometimes you want to break out and use Javascript with Anvil. And if you’re doing that, you might want to import an external Javascript library or service. Here’s how to do that.

Note: Using Javascript with Anvil is an advanced feature. Anvil lets you build web apps with nothing but Python! But if you’re already a Javascript expert, or if you want to integrate with an external service that’s asking you to paste some HTML into your page, then read on…

1. Find the “head snippet” for the library or service you’re looking for

For example, let’s say we want to add Intercom’s live chat widget to our Anvil app. From their website, we can copy and paste a snippet of HTML that loads the chat widget:

Screenshot of Intercom website

2. Add it to your Anvil app

Select the Native Libraries option in the App Browser, then paste the HTML snippet in there:

Screenshot of Native Libraries

What’s happening here?

Any HTML you add to the “Native Libraries” section will be inserted into the <head> tag of your Anvil app’s HTML. This is a great place to add a <script> tag to pull in an external library (or a .js file in your app’s Assets). You can also use <link> tags to refer to external CSS.