# Scripts

There are two ways of adding third party scripts. Embedding is ideal for one-off scripts, e.g. widgets.js that is part of embedded tweets (see below). Adding global scripts is for scripts that should be loaded on every page.

## Embedding

Hydejack supports embedding third party scripts directly inside markdown content. This will work in most cases, except when a script can not be loaded on a page more than once (this will occur when a user navigates to the same page twice).

Example:

<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<p lang="en" dir="ltr">
The next version of Hydejack (v6.3.0) will allow embedding 3rd party scripts,
like the one that comes with this tweet for example.
</p>
&mdash; Florian Klampfer (@qwtel)
</blockquote>


## Global scripts

If you have scripts that should be included on every page you can add them globally by opening (or creating) _includes/my-scripts.html and adding them like you normally would:

<!-- file: _includes/my-scripts.html -->
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
crossorigin="anonymous"></script>


my-scripts.html will be included at the end of the body tag.

## Registering push state event listeners

When embedding scripts globally you might want to run some init code after each page load. However, the problem with push state-based page loads is that the load event won’t fire again. Luckily, Hydejack’s push state component exposes an event that you can listen to instead.

<!-- file: _includes/my-scripts.html -->
<script>
});
</script>


Note that the above code must only run once, so include it in your my-scripts.html.

hy-push-state-start
hy-push-state-ready
Animation fished and response has been parsed, ready to swap out the content.
hy-push-state-after
The old content has been replaced with the new content.
hy-push-state-progress
Special case when animation is finished, but no response from server has arrived yet. This is when the loading spinner will appear.
hy-push-state-load
All embedded script tags have been inserted into the document and have finished loading.

## If everything else fails

If you can’t make an external script work with Hydejack’s push state approach to page loading, you can disable push state by adding to your config file:

# file: _config.yml
hydejack:
no_push_state: true


Continue with Build