Skip to main content

Custom domain

Hosting index.html file​

To host a widget on a custom domain, you need to create an index.html file with the following content and upload it to your web hosting server:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="notranslate" name="google"/>
    <meta content="#000000" name="theme-color"/>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover,minimal-ui">
    <link href="https://scena.link/app.js" rel="preload" as="script">

    <!-- Customize title -->
    <title></title>
    
    <!-- Optional: customize following metadata  -->
    <!--
    <meta name="title" content="Custom Domain Example">
    <meta name="description" content="">    
    <meta property="og:type" content="website">
    <meta property="og:url" content="">
    <meta property="og:title" content="">
    <meta property="og:description" content="">
    <meta property="og:image" content="">
    <meta property="twitter:card" content="">
    <meta property="twitter:url" content="">
    <meta property="twitter:title" content="">
    <meta property="twitter:description" content="">
    <meta property="twitter:image" content="">
    -->

    <!-- Optional: cookie consent -->
    <!--
    <link href="https://scena.link/assets/css/cookieconsent.css" rel="stylesheet">
    <script src="https://scena.link/assets/js/cookieconsent.js"></script>
    <script src="https://scena.link/assets/js/cookieconsent-init.js"></script>
    -->
    
    <!-- Optional: specify custom fonts -->
    <link href="https://scena.link/assets/css/fonts.css" rel="stylesheet">
    <style>
        * { font-family: 'Work Sans', sans-serif; font-size: 14px; }
        body, html { height: 100%; margin: 0; padding: 0; }
        @media screen and (max-width: 48em) {
            * { font-size: 13px; }
        }
    </style>
</head>
<body>
<!-- specific banner version -->
<!-- <scena-ai-banner key-id="aaaaabbbbb"></scena-ai-banner> -->

<!-- banner based on the URL e.g. /aaaaabbbb -> key-id=aaaaabbbb -->
<script>
const widgetId = (location && location.pathname && location.pathname.length > 1) ?  location.pathname.substring(1) : "";
document.write('<scena-ai-banner key-id="' + widgetId + '"></scena-ai-banner>');
</script>
<script src="https://scena.link/app.js"></script>

</body>
</html>

Please note that if you use a banner based on the URL version, your hosting must be configured to always serve content from index.html, even if the path is different. For example, if someone tries to open /r/my-widget or /aaaaabbbb, server should serve content from index.html file instead of showing a 404 error. Sample nginx configuration:

location / {
    try_files $uri $uri/ /index.html;
}

Using reverse proxy​

Alternatively, you can use proxy to forward requests from your domain to scena.link. Here is sample nginx configuration to do this:

location / {
    proxy_pass https://scena.link;
}