CINXE.COM

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>Custom Javascript - Gancio</title> <link href="https://github.com/lesion" rel="me"> <link href="eventi@cisti.org" rel="me"> <link rel="webmention" href="https://webmention.io/gancio.org/webmention" /> <link rel="pingback" href="https://webmention.io/gancio.org/xmlrpc" /> <link rel="shortcut icon" href="https://gancio.org/favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="https://gancio.org/assets/css/just-the-docs-default.css"> <link rel="stylesheet" href="https://gancio.org/assets/css/premonition.css"> <script type="text/javascript" src="https://gancio.org/assets/js/vendor/lunr.min.js"></script> <script type="text/javascript" src="https://gancio.org/assets/js/just-the-docs.js"></script> <script src="https://gancio.org/assets/js/jquery-3.3.1.min.js"></script> <link rel="stylesheet" href="https://gancio.org/assets/css/jquery.fancybox.min.css"> <script src="https://gancio.org/assets/js/jquery.fancybox.min.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1">  <title>Custom Javascript | Gancio</title> <meta name="generator" content="Jekyll v4.3.2" /> <meta property="og:title" content="Custom Javascript" /> <meta property="og:locale" content="en_US" /> <meta name="description" content="A shared agenda for local communities with AP support" /> <meta property="og:description" content="A shared agenda for local communities with AP support" /> <link rel="canonical" href="https://gancio.org/usage/custom_js" /> <meta property="og:url" content="https://gancio.org/usage/custom_js" /> <meta property="og:site_name" content="Gancio" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary" /> <meta property="twitter:title" content="Custom Javascript" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebPage","description":"A shared agenda for local communities with AP support","headline":"Custom Javascript","url":"https://gancio.org/usage/custom_js"}</script>  </head> <body> <a class="skip-to-main" href="#main-content">Skip to main content</a> <svg xmlns="http://www.w3.org/2000/svg" class="d-none"> <symbol id="svg-link" viewBox="0 0 24 24"> <title>Link</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link"> <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path> </svg> </symbol> <symbol id="svg-menu" viewBox="0 0 24 24"> <title>Menu</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"> <line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line> </svg> </symbol> <symbol id="svg-arrow-right" viewBox="0 0 24 24"> <title>Expand</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"> <polyline points="9 18 15 12 9 6"></polyline> </svg> </symbol>  <symbol id="svg-external-link" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"> <title id="svg-external-link-title">(external link)</title> <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line> </symbol> <symbol id="svg-doc" viewBox="0 0 24 24"> <title>Document</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"> <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline> </svg> </symbol> <symbol id="svg-search" viewBox="0 0 24 24"> <title>Search</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"> <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> </symbol>  <symbol id="svg-copy" viewBox="0 0 16 16"> <title>Copy</title> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16"> <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/> <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/> </svg> </symbol> <symbol id="svg-copied" viewBox="0 0 16 16"> <title>Copied</title> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-check-fill" viewBox="0 0 16 16"> <path d="M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3Zm3 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3Z"/> <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5v-1Zm6.854 7.354-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708.708Z"/> </svg> </symbol> </svg> <div class="side-bar"> <div class="site-header" role="banner"> <a href="/" class="site-title lh-tight"> Gancio </a> <button id="menu-button" class="site-button btn-reset" aria-label="Toggle menu" aria-pressed="false"> <svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><use xlink:href="#svg-menu"></use></svg> </button> </div> <nav aria-label="Main" id="site-nav" class="site-nav"> <ul class="nav-list"><li class="nav-list-item"><a href="/" class="nav-list-link">Home</a></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="toggle items in Usage category" aria-pressed="false"> <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg> </button><a href="/usage" class="nav-list-link">Usage</a><ul class="nav-list"><li class="nav-list-item"><a href="/usage/embed" class="nav-list-link">Embed events in webpages</a></li><li class="nav-list-item"><a href="/usage/moderation" class="nav-list-link">Moderation</a></li><li class="nav-list-item"><a href="/usage/users" class="nav-list-link">Users</a></li><li class="nav-list-item"><a href="/usage/cli" class="nav-list-link">CLI</a></li><li class="nav-list-item"><a href="/usage/federation" class="nav-list-link">Federation</a></li><li class="nav-list-item"><a href="/usage/plugins" class="nav-list-link">Plugins</a></li><li class="nav-list-item"><a href="/usage/custom_css" class="nav-list-link">Custom CSS</a></li><li class="nav-list-item"><a href="/usage/custom_js" class="nav-list-link">Custom Javascript</a></li></ul></li><li class="nav-list-item"><a href="/screenshot" class="nav-list-link">Screenshots</a></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="toggle items in Install category" aria-pressed="false"> <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg> </button><a href="/install" class="nav-list-link">Install</a><ul class="nav-list"><li class="nav-list-item"><a href="/install/debian" class="nav-list-link">Debian</a></li><li class="nav-list-item"><a href="/install/nixos" class="nav-list-link">NixOS</a></li><li class="nav-list-item"><a href="/install/docker" class="nav-list-link">Docker</a></li><li class="nav-list-item"><a href="/install/backup" class="nav-list-link">Backup</a></li><li class="nav-list-item"><a href="/install/config" class="nav-list-link">Configuration</a></li><li class="nav-list-item"><a href="/install/nominatim" class="nav-list-link">Nominatim</a></li><li class="nav-list-item"><a href="/install/nginx" class="nav-list-link">Nginx setup</a></li></ul></li><li class="nav-list-item"><button class="nav-list-expander btn-reset" aria-label="toggle items in Hacking category" aria-pressed="false"> <svg viewBox="0 0 24 24" aria-hidden="true"><use xlink:href="#svg-arrow-right"></use></svg> </button><a href="/dev" class="nav-list-link">Hacking</a><ul class="nav-list"><li class="nav-list-item"><a href="/dev/structure" class="nav-list-link">Project Structure</a></li><li class="nav-list-item"><a href="/dev/plugins" class="nav-list-link">Plugins</a></li><li class="nav-list-item"><a href="/dev/oauth" class="nav-list-link">OAuth</a></li><li class="nav-list-item"><a href="/dev/locales" class="nav-list-link">Internationalization</a></li><li class="nav-list-item"><a href="/dev/api" class="nav-list-link">API</a></li></ul></li><li class="nav-list-item"><a href="/contribute" class="nav-list-link">Contribute</a></li><li class="nav-list-item"><a href="/instances" class="nav-list-link">Instances</a></li><li class="nav-list-item"><a href="/about" class="nav-list-link">About</a></li><li class="nav-list-item"><a href="/contacts" class="nav-list-link">Contacts</a></li><li class="nav-list-item"><a href="/federation" class="nav-list-link">Federation</a></li><li class="nav-list-item"><a href="/changelog" class="nav-list-link">Changelog</a></li></ul> </nav> <footer class="site-footer"> This site uses <a href="https://github.com/just-the-docs/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll. </footer> </div> <div class="main" id="top"> <div id="main-header" class="main-header"> <div class="search" role="search"> <div class="search-input-wrap"> <input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search Gancio" aria-label="Search Gancio" autocomplete="off"> <label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label> </div> <div id="search-results" class="search-results"></div> </div> <nav aria-label="Auxiliary" class="aux-nav"> <ul class="aux-nav-list"> <li class="aux-nav-list-item"> <a href="https://framagit.org/les/gancio" class="site-button" > Source </a> </li> <li class="aux-nav-list-item"> <a href="https://mastodon.cisti.org/@gancio" class="site-button" > @gancio@mastodon.cisti.org </a> </li> </ul> </nav> </div> <div class="main-content-wrap"> <nav aria-label="Breadcrumb" class="breadcrumb-nav"> <ol class="breadcrumb-nav-list"> <li class="breadcrumb-nav-list-item"><a href="/usage">Usage</a></li> <li class="breadcrumb-nav-list-item"><span>Custom Javascript</span></li> </ol> </nav> <div id="main-content" class="main-content"> <main> <h2 id="custom-javascript-since-1190-beta"> <a href="#custom-javascript-since-1190-beta" class="anchor-heading" aria-labelledby="custom-javascript-since-1190-beta"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Custom Javascript <span class="label label-yellow">Since 1.19.0</span> <span class="label label-red">BETA</span> </h2> <p>You can integrate some javascript code that will be loaded for each user in <code class="language-plaintext highlighter-rouge">Admin > Theme > Custom JS</code></p> <p>Don鈥檛 imagine you can accomplish miracles because the templates are not designed to be easily modified, but don鈥檛 be afraid to <a href="https://framagit.org/les/gancio/-/issues">open an issue</a> or even better a PR to add some usage examples to this page.</p> <h2 id="examples"> <a href="#examples" class="anchor-heading" aria-labelledby="examples"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Examples: </h2> <h3 id="integrate-plausible-httpsplausibleio"> <a href="#integrate-plausible-httpsplausibleio" class="anchor-heading" aria-labelledby="integrate-plausible-httpsplausibleio"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Integrate Plausible (<a href="https://plausible.io/">https://plausible.io/</a>) </h3> <div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">script</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">script</span><span class="dl">'</span><span class="p">);</span> <span class="nx">script</span><span class="p">.</span><span class="nx">defer</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span> <span class="nx">script</span><span class="p">.</span><span class="nx">src</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">https://plausible.io/js/script.js</span><span class="dl">"</span><span class="p">;</span> <span class="nx">script</span><span class="p">.</span><span class="nx">dataset</span><span class="p">.</span><span class="nx">domain</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">yourdomain.com</span><span class="dl">"</span><span class="p">;</span> <span class="nb">document</span><span class="p">.</span><span class="nf">getElementsByTagName</span><span class="p">(</span><span class="dl">'</span><span class="s1">head</span><span class="dl">'</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nf">appendChild</span><span class="p">(</span><span class="nx">script</span><span class="p">);</span> </code></pre></div></div> <h3 id="integrate-umami-httpsumamiis"> <a href="#integrate-umami-httpsumamiis" class="anchor-heading" aria-labelledby="integrate-umami-httpsumamiis"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Integrate Umami (<a href="https://umami.is/">https://umami.is/</a>) </h3> <div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">el</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nf">createElement</span><span class="p">(</span><span class="dl">'</span><span class="s1">script</span><span class="dl">'</span><span class="p">);</span> <span class="nx">el</span><span class="p">.</span><span class="nf">setAttribute</span><span class="p">(</span><span class="dl">'</span><span class="s1">src</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">http://mywebsite.com/umami.js</span><span class="dl">'</span><span class="p">);</span> <span class="nx">el</span><span class="p">.</span><span class="nf">setAttribute</span><span class="p">(</span><span class="dl">'</span><span class="s1">data-website-id</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">your-website-id-string-of-numbers</span><span class="dl">'</span><span class="p">);</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nf">appendChild</span><span class="p">(</span><span class="nx">el</span><span class="p">);</span> </code></pre></div></div> <div class="premonition info"> <i class="premonition pn-info"></i> <div class="content"> <p class="header">References</p><p><a href="https://framagit.org/les/gancio/-/issues/413">#413</a>, <a href="https://framagit.org/les/gancio/-/issues/320">#320</a>, <a href="https://framagit.org/les/gancio/-/issues/467">#467</a></p> </div> </div> </main> <hr> <footer> <div class="d-flex mt-2"> <p class="text-small text-grey-dk-000 mb-0"> <a href="https://framagit.org/les/gancio/-/tree/master/docs/usage/custom_js.md" id="edit-this-page">Edit this page</a> </p> </div> </footer> </div> </div> <div class="search-overlay"></div> </div> </body> </html>