Display your freelance availability on your website

New Feature Klaxon! You can now display how many days free you have for the upcoming months on your website.

Here is an example from my business website:

View this on the following site: https://raison.co

The code is simple, just set your username variable at the top. Your username is set in your Simplehours settings.

You can amend the CSS styles as per your site design. The code is in PHP so suitable for WordPress or Laravel sites. It’s very simple and if you code in other languages, then I’m sure you can adjust as per your needs.

The API endpoint is: https://simplehours.com/api/widget?username=

Would you prefer to have this as a WordPress plugin? Let me know in the comments.

<?php

// set your username
$username = 'elliot';

// get data from simplehours api
$url = "https://simplehours.com/api/widget?username=" . $username;
$string = file_get_contents($url);


// error checking
if ($string == 'null') {
	return;
}

// get vars
$jsonfile = json_decode($string);
$month_current = $jsonfile->month_current;
$month_next = $jsonfile->month_next;
$month_next_name = $jsonfile->month_next_name;

?>


<div class="sh-widget">
	<div class="container">
		<div class="sh-widget-wrapper">
			<div class="sh-widget--description"><span><?php echo $month_current; ?> days</span> free to book next month and <span><?php echo $month_next; ?> days</span> in <?php echo $month_next_name; ?></div>
			<a href="https://simplehours.com/profile/<?php echo $username; ?>" target="_blank" class="btn button sh-widget--button">View availability and book my time</a>
		</div>
	</div>
</div>


<style>
	.sh-widget:nth-of-type(2) {

		background: #323844;
		color: #fff;
	}

	.sh-widget {
		background: #F5F6F6;
		padding: 2rem 0;
	}

	.sh-widget-wrapper {

		text-align: center;
		margin: 5rem 0;
	}

	.sh-widget .sh-widget--description {
		font-size: 2rem;
		font-weight: regular;
		margin-bottom: 2rem;
	}

	.sh-widget .sh-widget--description span {
		font-weight: bold;
	}

	.sh-widget .sh-widget--button {
		margin-top: 2rem;
		background: #dd314e;
		color: #fff;
		text-transform: uppercase;
	}
</style>

Published by Elliot Taylor

Freelance Web Developer and Product Maker

Leave a comment

Your email address will not be published. Required fields are marked *