# Difficulties in correctly adding external JavaScript

**URL:** <https://meta.discourse.org/t/difficulties-in-correctly-adding-external-javascript/118099>\
**Category:** Support\
**Created:** [May 18, 2019, 6:00pm UTC](https://meta.discourse.org/t/difficulties-in-correctly-adding-external-javascript/118099 "2019-05-18T18:00:26Z")\
**Posts on this page:** 1\
**Showing post:** 1

<div class="post-metadata">

**Author:** ![StevenTammen](https://avatars.discourse-cdn.com/v4/letter/s/e5b9ba/32.png) [@StevenTammen](https://meta.discourse.org/u/StevenTammen)\
**Post date:** [May 18, 2019, 6:00pm UTC](https://meta.discourse.org/t/difficulties-in-correctly-adding-external-javascript/118099/1 "2019-05-18T18:00:26Z")

</div>

## TL;DR Summary

- I could be wrong, but it seems like the order of `<script>` tags in the `</body>` theme customization section is not respected.
- I can’t figure out how to get [https://faithlife.com/products/reftagger](https://faithlife.com/products/reftagger) to execute when I put it in the `</body>` theme customization section.
- Once I resolve the above, I’m not exactly sure how I’d go about wrapping it in a call to ` api.onPageChange()` to make it work when more posts are loaded.

## Background

I am attempting to make use of [a JavaScript library that adds tooltips to Bible verses upon hover](https://faithlife.com/products/reftagger). I haven’t really looked at the code too closely, but I think it scans text in the DOM for things that match its regular expressions, then adds links with a CSS class that enables the tooltip hover behavior. Here’s a simple HTML page as an example:

```plaintext
<html>
	<head>
		<title>Reftagger test</title>
	</head>

	<body>
		<p>A sentence without a link that should get picked up.</p>
		<p>A link that should get picked up: Romans 8:28.</p>
		
		<script>
		var refTagger = {
			settings: {
				bibleVersion: "NKJV",
				convertHyperlinks: true,		
				roundCorners: true,
				socialSharing: [],
				tagChapters: true
			}
		};
		</script>
		
		<script src="https://api.reftagger.com/v2/RefTagger.js" type="text/javascript"></script>

	</body>

</html>

```

I’ve been trying to add this functionality to my Discourse install for a few hours now, and I can’t figure out exactly what I need to do.

## My first attempt

I whitelisted the API I wish to use in the Content Security Policy customization section ([as described in this prior forum post](https://meta.discourse.org/t/mitigate-xss-attacks-with-content-security-policy/104243#heading--extend-default-csp)), like so:

 ![image](https://global.discourse-cdn.com/meta/original/3X/5/2/521d9d8e95193be16598961fd2a8ea5f3e6a2fb4.png)

Then I added the JavaScript to the `</body>` section of theme customization:

 ![image](https://global.discourse-cdn.com/meta/original/3X/0/1/01fbc6338b3116eb935416aeba1b74075562c86e.png)

After doing these things, it does not appear to work, even on the first page. For one thing, the order of the `<script>` tags does not seem to be respected, as the settings are placed after the external call, opposite the order in the customization section (at least according to Chrome dev tools):

![image](https://global.discourse-cdn.com/meta/original/3X/2/8/28ba4450cf38000d9cf80bc27c059a358e829fa0.png)

 ![image](https://global.discourse-cdn.com/meta/original/3X/6/2/6256344aeb60f994679d346c7165f40be0ec17c6.png)

I might be able to fix this by putting the settings in the `</head>` customization section, but it seems a bit hackish to me. Is the order of `<script>` tags in the customization sections not being respected, or am I doing something wrong?

Regardless, I don’t think this is the underlying reason why the JavaScript isn’t working, but I don’t know what else is interfering.

## Additional issues

[From what I have read](https://meta.discourse.org/t/how-do-you-force-a-script-to-refire-on-every-page-load-in-discourse/74856), I would need to wrap the execution of the verse-tagging code in an `api.onPageChange()` call for it to work as more posts get loaded. Something like the following:

```plaintext
<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() => {
        // call verse tagging functionality
    });
</script>

```

I haven’t gotten here yet (as I wanted to figure out how to get it to work initially before worrying about this), but I figured I’d mention that this would probably be necessary. I’m a bit rusty on my JavaScript, so I’m not entirely sure how I would go about converting the external call via `<script>` tag into something callable from inside a another script tag. That is, how to put

```plaintext
<script src="https://api.reftagger.com/v2/RefTagger.js" type="text/javascript"></script>

```

Into the form

```plaintext
<script>
    // execute contents of https://api.reftagger.com/v2/RefTagger.js
</script>

```

The JavaScript I’m calling is fairly minified, which makes it hard to follow.

## Closing observations

I’d appreciate any feedback/pointers. I am attempting to _not_ just copy-paste stuff until something works, because I’d like to understand more or less what’s going on. I’m definitely not above using code that works and then tracing backwards though. 🙂

Might any of this be made easier by editing template files directly on the hosting server?

---

_[View the full topic](https://meta.discourse.org/t/difficulties-in-correctly-adding-external-javascript/118099)._
