# Quickstart

# Timeline mod

Add a timeline mod to your web page:

Paste the AnyMod script in the head of your HTML, just before the closing </head> tag:

<!-- AnyMod -->
<script id="AnyMod-script">
  (function (m,o,d,u,l,a,r,i,z,e) {
    u[m]={Project:o,rq:[],Opts:r,ready:function(j){u[m].rq.push(j)}};function j(s){return encodeURIComponent(btoa(s))};z=l.getElementById(m+'-'+a);r=u.location;
    e=[d+'/page/'+o+'/'+j(r.pathname)+'/'+j(r.host)+'?t='+Date.now(),d];e.map(function(w){i=l.createElement(a);i.defer=1;i.src=w;z.parentNode.insertBefore(i,z);});
  })('AnyMod','8PP6M2','https://cdn.anymod.com/v2',window,document,'script',{});
</script>
<!-- /AnyMod -->

Paste the mod tag inside the <body> of your HTML, wherever you want the mod to show:

<!-- Timeline demo -->
<div id="anymod-oollr"></div>

When you load your page, a timeline mod appears:

You have just added your very first mod!

TIP

Click the pencil on the right, then click the timeline mod above to edit its content.

You can clone this mod into your own project here (opens new window) and make live edits, or simply view it in a jsfiddle (opens new window).

# HTML

The HTML for the above example looks like the following:

<html>

  <head>
    <title>AnyMod Quickstart</title>

    <!-- AnyMod -->
    <script id="AnyMod-script">
      (function (m,o,d,u,l,a,r,i,z,e) {
        u[m]={Project:o,rq:[],Opts:r,ready:function(j){u[m].rq.push(j)}};function j(s){return encodeURIComponent(btoa(s))};z=l.getElementById(m+'-'+a);r=u.location;
        e=[d+'/page/'+o+'/'+j(r.pathname)+'/'+j(r.host)+'?t='+Date.now(),d];e.map(function(w){i=l.createElement(a);i.defer=1;i.src=w;z.parentNode.insertBefore(i,z);});
      })('AnyMod','8PP6M2','https://cdn.anymod.com/v2',window,document,'script',{});
    </script>
    <!-- /AnyMod -->
  </head>

  <body>
    <!-- Timeline demo -->
    <div id="anymod-oollr"></div>
  </body>

</html>

See the Examples section for even more examples.

Introduction →