Don't want our default suspended website page to show if your account gets suspended? This guide will show you how to setup your own custom suspension page!
⚠️ This TH+ feature is provided to all users during at this time. Reply to this post, or create a newInformal post and share your feedback! ⚠️
Note: This feature works on a domain basis. This means that you can configure a different page for each domain, even if they are on the same hosting account!
Prerequisites
All of the following must be true in order to use this feature:
Custom Suspension pages can only be configured on custom domains. Custom domains are domains you have bought yourself from a domain registrar (Like NameSilo). Don't have a custom domain? You can buy a custom domain here to use with this feature.
Custom Suspension pages can only be configured on domains that are a part of the Cloudflare network. Haven't connected your domain to Cloudflare? It's easy, just follow our guide on how to connect your domain to Cloudflare!
You must be an Administrator on the Cloudflare Zone that holds your custom domain (If you setup Cloudflare following the guide above, you don't have to worry about this!)
Supplemental Terms
Click here to review the supplemental terms
The supplemental terms below are not legally binding, may not be up to date, and are only placed below for your convivence. Read the full terms on our legal page https://tinkerhost.net/legal/
This feature utilizes the Cloudflare API, and Cloudflare Workers. At the time of writing, Cloudflare allows up to 100,000 worker requests per day. While your website is suspended, one worker request is used each time your custom page is shown. By default, Cloudflare will block any requests if the limit is hit, however you can configure Cloudflare to continue to show your custom page, inducing charges to your account. By using this feature, you release TinkerHost from any financial liability regarding your Cloudflare Account. You are solely responsible for ensuring no erroneous changes are made to your account, and TinkerHost only has permissions that it requires for the feature. By using this feature, you grant TinkerHost unlimited access (while your Cloudflare API token is active), to read, create, edit, and delete Worker Routes, read Worker Scripts on your Cloudflare account, and purge the cache on your site on Cloudflare (We need this ability to make sure your custom suspension page disappears once your account is unsuspended). TinkerHost reserves the right to modify these terms in any way at any time without prior notification or warning. To revoke your agreement to these supplemental terms, select the "remove" or "delete" button that appears next to your domain in the "Custom Suspension Page" dashboard. Additionally, we highly recommend that you delete the Cloudflare API key you configured for the feature in your Cloudflare dashboard.
Setup
Configure Cloudflare settings
Login to your Cloudflare Account, and select Workers & Pages
--> Overview
. Then, select Create Application
(Or, Click Here)
Select Create Worker
(Tip: Don't select a preset, just create a blank worker, or a Hello World
worker)
Name your worker (We suggest yourSiteName-outage
), and click deploy
Select the Edit Code
button
![](https://i.imgur.com/oXVHPye.png)
Replace all the code currently in the worker with the code below
async function handleRequest(request) {
return new Response(outagehtml, {
headers: {
'content-type': 'text/html;charset=UTF-8',
'content-encoding': 'gzip',
'vary': 'accept-encoding',
},
status: 503,
});
}
addEventListener('fetch', event => {
return event.respondWith(handleRequest(event.request));
});
const outagehtml = `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Site Under Maintenance</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="TinkerHost Free Hosting">
<meta name="Copyright" content="2024">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&family=Roboto:wght@500&family=Titillium+Web:wght@900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
#Error-Page{
text-align: center;
}
#top{
margin-top: 40vh;
}
footer{
text-align: center;
}
body{
background-color: #eee;
}
</style>
</head>
<body id="top">
<section id="Error-Page">
<h1>This page is currently under maintance</h1>
<p><i>We are doing some work on our server at the moment.</i><br><br>We should be back in a few hours!</p>
</section>
<br>
<footer>
<p><small><small><small>All code and content © 2022-2023. Powered by TinkerHost.net</small></small></small></p>
</footer>
</body>
</html>
`;
You can replace the HTML code with whatever you want to show on the page! Please remember that you cannot link to or request files (Like stylesheets, scripts, or images) from your website, as the requests will fail.
- Select
Deploy
, then Save and Deploy
![](https://i.imgur.com/wszsx7j.png)
- Prepare for the next section by returning to the Cloudflare Dashboard's Homepage, and click on the domain (Or Zone) that you wish to show the page you just created on if your TinkerHost hosting account gets suspended.
Configure your TinkerHost settings
Navigate to your TinkerHost dashboard, and select the account that holds the domain you wish you configure
Scroll down and select Custom Suspension Page
Check that the domain you want to setup a custom suspension page for is compatible with the feature. If the domain is not compatible, check the note provided in the dashboard, or refer to the notes at the top of this article
Create an API key in your Cloudflare dashboard by following the steps below:
4a. Navigate to Profile
--> API Keys
in your Cloudflare account (Or, click here)
4b. Select "Create Token"
4c. Select the "Create Custom Token" option
![](https://i.imgur.com/CdmpTjm.png)
4d. Configure the following permissions:
Account | Workers Scripts | Read
Account | Workers Routes | Edit
Zone | Cache Purge | Purge
![](https://i.imgur.com/eWoniEjh.png)
Tip! When selecting from the dropdown menus, type the first letter on your keyboard to jump to that section of the options. For example, hit the "w" key after opening the dropdown menu when looking for one of the "worker" permissions
4e. Restrict the key's access by selecting your account, and domain name from the dropdown options
![](https://i.imgur.com/XUp4KCAh.png)
Important! If you are using the same API key for multiple domains, do not restrict access by zone, leave that section as default
Tip! Don't see all those options? Make sure you completed step 4d correctly!
4f. Leave the rest of the sections as default, and select "Continue to summary"
4g. Important! Make sure your screen looks like the screenshot below (However, your account name and domain name will be different). If your screen does not match the screenshot below, go back to step 4d and ensure you selected the correct permissions:
![](https://i.imgur.com/zu4lYJc.png)
- When the token is generated, copy it, and paste it in the TH Dashboard (Don't dismiss the page yet, you may need it again later. Open the Cloudflare dashboard in a new tab to continue on!)
![](https://i.imgur.com/drPebCVh.png)
- In a new tab with the Cloudflare dashboard opened, select your domain name (or Zone), and look in the right sidebar (Or at the bottom of the page on mobile) for the section labeled "API". Using the "Click to copy" buttons, copy the keys into the appropriate spots in the TH dashboard (See the color-coded screenshots below)
![](https://i.imgur.com/oYDhm48.png)
![](https://i.imgur.com/2E4AUTLh.png)
- Click "Submit" in the TH dashboard and select the worker that you named in step 3
![](https://i.imgur.com/ewUJypRh.png)
Important! If you configured your worker to execute additional tasks, note that it will be executed after clicking the blue button to ensure the permissions were set correctly!
That's it! If you experience any errors, ensure that you setup the API key permissions correctly, and the keys were copied correctly. Feel free to open a new topic inHosting Support if you need assistance, and we are more then happy to accept your thoughts, feedback, and suggestions on this new feature right here (Just click "Reply", or create a topic inInformal)!
All the best,
The TinkerHost Dev Team