iframe

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<div id="viewer"></div>

<script type="text/javascript" src="https://iiif-qa.bodleian.ox.ac.uk/mirador/3/dist/mirador-with-plugins.js"></script>
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        const config = {
            id: 'viewer',
            window: {
                allowTopMenuButton: true,
                allowMaximize: false,
                allowClose: false,
                allowFullscreen: false,
            },
            workspace: {
                showZoomControls: true
            },
            workspaceControlPanel: {
                enabled: false
            },
            windows: [{
                // open a specific manifest (optional)
                manifestId: 'https://iiif-qa.bodleian.ox.ac.uk/iiif/manifest/441db95d-cdff-472e-bb2d-b46f043db82d.json',
                    // open a specific canvas (optional)
                    canvasId: 'https://iiif-qa.bodleian.ox.ac.uk/iiif/canvas/ee1149de-7afe-492a-9806-245e74a01b66.json'
            }],
                requests: {
                    // Manipulate IIIF HTTP requests (info.json, IIIF presentation manifests, annotations, etc) to add an Accept header so we use our v3 manifests
                    preprocessors: [
                        (url, options) => ({ ...options, headers: { ...options.headers, Accept: 'application/ld+json;profile="http://iiif.io/api/presentation/3/context.json"' }})
                    ],
                },
            theme: {
                palette: {
                    primary: {
                        main: '#1967d2',
                    },
                },
            },
        };

        Mirador.viewer(config);
    });
</script>