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:

$(function(){
  alert('foobar');
});

More information in 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:

<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:

  # 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):

Notice that you can resize this textarea.