First we need a div for the map:

<div id="map"></div>

And second lets add some javascript:

// we rely on OpenLayers
<script src="//esa.maps.eox.at/dist/ol/OpenLayers.js" type="text/javascript"></script>
// and some custom code
<script type="text/javascript">
    // some defaults for eox::maps
    eox = {
        maps: {
            defaults: {
                map: {
                    div: 'map',
                    layers: [],
                    zoom: 0,
                    center: new OpenLayers.LonLat(0,0),
                    projection: new OpenLayers.Projection('EPSG:4326'),
                    restrictedExtent: new OpenLayers.Bounds(-720, -85, 720, 90),
                },
                layer: {
                    url: [
                        '//a.tiles.esa.maps.eox.at/wmts/',
                        '//b.tiles.esa.maps.eox.at/wmts/',
                        '//c.tiles.esa.maps.eox.at/wmts/',
                        '//d.tiles.esa.maps.eox.at/wmts/',
                        '//e.tiles.esa.maps.eox.at/wmts/',
                        '//f.tiles.esa.maps.eox.at/wmts/',
                    ],
                    matrixSet: 'WGS84',
                    style: 'default',
                    requestEncoding: 'REST',
                    maxResolution: 0.703125,
                    wrapDateLine: true,
                    transitionEffect: 'resize',
                    isBaseLayer: false,
                },
            },
            layers: {
                base: {
                    terrainlight: {
                        name: 'Terrain Light',
                        layer: 'terrain-light',
                        numZoomLevels: 15,
                        attribution: 'Terrain Light { Data © OpenStreetMap contributors and others, Rendering © EOX }'
                    },
                    terrain: {
                        name: 'Terrain',
                        layer: 'terrain',
                        numZoomLevels: 15,
                        attribution: 'Terrain { Data © OpenStreetMap contributors and others, Rendering © EOX }'
                    },
                    's2cloudless-2018': {
                        name: 'Sentinel-2 cloudless 2018',
                        layer: 's2cloudless-2018',
                        numZoomLevels: 14,
                        attribution: 'Sentinel-2 cloudless - https://s2maps.eu by EOX IT Services GmbH (Contains modified Copernicus Sentinel data 2017 & 2018)'
                    },
                    's2cloudless-2016': {
                        name: 'Sentinel-2 cloudless 2016',
                        layer: 's2cloudless',
                        numZoomLevels: 14,
                        attribution: 'Sentinel-2 cloudless - https://s2maps.eu by EOX IT Services GmbH (Contains modified Copernicus Sentinel data 2016 & 2017)'
                    },
                    osm: {
                        name: 'OpenStreetMap',
                        layer: 'osm',
                        numZoomLevels: 18,
                        attribution: 'OpenStreetMap { Data © OpenStreetMap contributors, Rendering © MapServer and EOX }'
                    },
                    bluemarble: {
                        name: 'Blue Marble',
                        layer: 'bluemarble',
                        numZoomLevels: 9,
                        attribution: 'Blue Marble { © NASA }'
                    },
                    blackmarble: {
                        name: 'Black Marble',
                        layer: 'blackmarble',
                        numZoomLevels: 8,
                        attribution: 'Black Marble { © NASA }'
                    },
                },
                overlays: {
                    overlay: {
                        name: 'Overlay',
                        layer: 'overlay',
                        numZoomLevels: 18,
                        attribution: 'Overlay { Data © OpenStreetMap contributors, Rendering © EOX and MapServer }'
                    },
                    overlay_bright: {
                        name: 'Overlay (Bright)',
                        layer: 'overlay_bright',
                        numZoomLevels: 18,
                        visibility: false,
                        attribution: 'Overlay { Data © OpenStreetMap contributors, Rendering © EOX and MapServer }'
                    },
                }
            }
        }
    }
    eox.maps.defaults.base = OpenLayers.Util.applyDefaults({ isBaseLayer: true }, eox.maps.defaults.layer);
    eox.maps.defaults.overlay = OpenLayers.Util.applyDefaults({ transitionEffect: 'map-resize' }, eox.maps.defaults.layer);

    // define base layers
    for (base in eox.maps.layers.base) {
        eox.maps.layers.base[base] = new OpenLayers.Layer.WMTS(OpenLayers.Util.applyDefaults(eox.maps.layers.base[base], eox.maps.defaults.base));
        eox.maps.defaults.map.layers.push( eox.maps.layers.base[base] )
    }

    // define overlays
    for (overlay in eox.maps.layers.overlays) {
        eox.maps.layers.overlays[overlay] = new OpenLayers.Layer.WMTS(OpenLayers.Util.applyDefaults(eox.maps.layers.overlays[overlay], eox.maps.defaults.overlay));
        eox.maps.defaults.map.layers.push( eox.maps.layers.overlays[overlay] )
    }

    // setup the actual map
    var map = new OpenLayers.Map(OpenLayers.Util.applyDefaults( {
        center: new OpenLayers.LonLat(20, 50),
        zoom: 3,
        controls: [
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.Zoom(),
            new OpenLayers.Control.LayerSwitcher(),
            new OpenLayers.Control.Attribution()
        ]
    }, eox.maps.defaults.map));
</script>

<style>
    #map div.olControlAttribution {
      position: absolute;
      bottom: 0;
      right: 0;
      color: #333;
      background-color: #fff;
      padding: 1px 5px 0 5px;
      border: 1px solid #ccc;
      border-radius: 3px 0 0 0;
      border-width: 1px 0 0 1px;
      font-size: .85em;
      line-height: 1.5em;
    }
</style>