= Javascript

You can add Javascript code by multiple ways in Decidim:

== Webpacker

Decidim uses Webpack (via Webpacker) to compile assets, including javascript.

During the generation of a decidim app, the file `app/packs/src/decidim/decidim_application.js` is created and hooked to Decidim packs, so any javascript written there is compiled within Decidim assets. For example to create a new alert just add:

[source,javascript]
----
$(function(){
  alert('foobar');
});
----

More information in https://guides.rubyonrails.org/webpacker.html[Rails Webpacker documentation].

If you want to replace a whole file existing in Decidim you can do it by creating a file in your application with the same name and the same path. I.e: to replace `decidim-core/app/packs/src/decidim/editor/index.js` you should create in your Rails app a file in
  `app/packs/src/decidim/editor/index.js` and it will have more priority over the Decidim file.

== Head extra file

There is an special partial file for adding inline content in every public page. You just need to create a file called `app/views/layouts/decidim/_head_extra.html.erb`:

[source,javascript]
----
<script type="text/javascript">
$(function(){
  alert('foobar');
});
</script>
----

== Custom HTML Header snippets

If you need changes on a multitenant installation, you can do so by enabling a configuration
in your `config/initializers/decidim.rb` file. Please do notice that this has security implications:

[source,ruby]
----
  # Custom HTML Header snippets
  #
  # The most common use is to integrate third-party services that require some
  # extra JavaScript or CSS. Also, you can use it to add extra meta tags to the
  # HTML. Note that this will only be rendered in public pages, not in the admin
  # section.
  #
  # Before enabling this you should ensure that any tracking that might be done
  # is in accordance with the rules and regulations that apply to your
  # environment and usage scenarios. This feature also comes with the risk
  # that an organization's administrator injects malicious scripts to spy on or
  # take over user accounts.
  #
  config.enable_html_header_snippets = true
----

Then you will have a new textarea field called "Header snippets" in Administration -> Configuration -> Appearance (URL `/admin/organization/appearance/edit`):

image::header-snippet.png[Header snippet]

Notice that you can resize this textarea.