Thursday, October 24, 2019

How to Add a Booking Calendar to WordPress with the Bookly Pro Plugin

Final product image
What You'll Be Creating

If you run a business that takes bookings or appointments, adding a booking calendar plugin to WordPress website will win you more business. Here's how to do it with the Bookly Pro plugin.

This will help you get more business and reduce time spent taking bookings manually.

In this tutorial, I'll discuss the benefits of adding bookings to your WordPress site and look at some examples of the kind of site that might include bookings. I'll then show you how using the Bookly Pro plugin can help you add slick, professional-looking booking systems to your business website.

Why Add Online Bookings to Your Site?

People are becoming more and more accustomed to browsing and booking things online. Everything from doctors' appointments to holidays: if it's available online, then it'll encourage people to make that booking or appointment. You can even buy and sell houses entirely online now, without even setting foot inside the house.

So if you run a business that offers appointments or bookings to customers, you're missing out if you don't make this possible online. Sure, it can seem easier to include an inquiry form or a phone number (hopefully both) on your site, but if you also add online bookings, you can pick up much more business.

It also saves time. Imagine you run a hotel and you take your bookings over the phone or by email. This involves a member of your team taking the booking and adding it to your calendar or system. It also means that someone has to be available to answer the phone or respond to emails at all times of day. But if you have online bookings on your website, your customers can make bookings at a time of day to suit them, without having to make contact with your team and use their time. Freeing you up to do more important things, or saving on staffing costs.

This doesn't just apply to customer-facing business. A bookings or appointment system also lets you book internal meetings, booking out meeting rooms and adding team members to the booking. This can save time and confusion.

Bookly Pro

The Bookly Pro plugin lets you add all sorts of bookings to your WordPress site. It's designed to make the process of adding a bookings system quick and easy, and includes blocks for booking forms so you know it's compatible with WordPress Gutenberg.

It's also responsive, so your customers can make bookings on their mobile phones.

Uses for a Booking System

Let's take a look at some of the scenarios in which you might want to add bookings to your website, and some of the business types that would find it useful.

  • Hotels: take bookings for rooms and include add-ons such as breakfast and in-room treats.
  • Holiday rentals and campsites: take bookings for time slots (weekly, weekend, etc.) that you define, as well as showing customers what's available and what the prices are.
  • Healthcare professionals: take bookings for appointments, with an option for the customer to choose which member of your team they'd like to see and what type of consultation they need.
  • Hair and beauty salons: show potential clients which slots are available with which team members, allow bookings, and then send out reminders when the booking is coming up.
  • Real estate agents: take bookings for property viewings and follow up for feedback.
  • Lawyers, accountants, other business professionals: take bookings for consultations and allow clients to provide information about the service they need.
  • Venues: allow booking of event and venue space along with equipment and other resources.
  • Teams: book out time and resources such as meeting rooms with other team members.

I'm sure this list isn't exhaustive, and there are plenty more business types that need to book time or resources with clients or between team members. If you need to book appointments, meetings or anything else, a booking system is a great way to make this easier.

Using Bookly Pro to Add Bookings to Your Site

The Bookly Pro plugin is designed to make it quick and easy to add bookings to your WordPress site. You can customize bookings to let people pick services, staff members and time slots, and customize which parts of the booking process people need to go through. The plugin will send notifications to your team and to the customer to remind them when the booking is coming up, and will also link to payment gateways for payment.

Let's take a look at how it works.

Start by installing the Bookly Pro plugin on your site, and activating it.

Configuring the Plugin

Before you can add a booking form, you need to configure how your booking system will work. Do this by going to Bookly > Settings.

To get your booking system set up you'll have to work through the following:

  • Settings: configure settings for time slots, availability and how far in advance you take bookings.
  • Staff Members: add staff members to the system if people can book with individual staff members.. Even if your customers won't be booking with staff members, you need to create at least one staff member and assign services to them so they can be notified when a booking is made. If you don't do this, the booking form won't work correctly. You can also configure staff members' schedule to include days off and working hours.
  • Services: define the service people will be booking, how long it lasts for, what it costs and more. You can add multiple services here.
  • Payments: configure the payment gateways you will be using so customers can pay when they make the booking.

Once you've done this, you're ready to create a booking form.

Adding a Booking Form

I've created an empty Booking page on my site for an imaginary campsite, which you can see below.

empty booking page

Then while editing the page, add a block for bookings. You'll see a Bookly set of blocks in the Gutenberg Editor.

Bookly Pro blocks

You have three choices:

  • a booking form
  • an appointments list
  • a cancellation confirmation

Here we'll be adding a booking form.

You then edit the form via the editing pane on the right hand side of the screen.

editing booking form

You can choose to hide categories or staff members or even services—but if you hide services you need to specify a default service. You might do this if you have only one service available.

Cusomizing the Booking Form

You can customize the appearance of the booking form in Bookly > Appearance.

appearance options

Here you can change the color of the form and customize labels and messages for form items.

Take some time to work through the appearance settings and get the form looking good and in keeping with your site's branding.

My final form looks like this:

the final form

Managing Bookings

The plugin also lets you manage bookings and contact customers. You do this via Bookly > Calendar and Bookly > Appointments. 

Here you can view appointments for the whole team and for individual staff members, and you can see customer details so you can contact them if needs be, and prepare for appointments.

Summary

Adding bookings to your WordPress site will help you win more business and save you time taking bookings over the phone or by email.

The Bookly Pro plugin lets you add different kinds of appointments or bookings and configure these to meet the needs of your business. Adding it to your site will help you be more efficient and profitable.


by Rachel McCollin via Envato Tuts+ Code
Posted by at No comments:
Labels: , , , , , , , , , , ,

Elon Musk Sends his First Tweet Through Space, Courtesy of Starlink Satellite!

Around 5 months ago in May, SpaceX (founded by Elon Musk) launched 60 Starlink satellites into space. The motive behind it has always been to run a broadband satellite network. Fast forward to the present day, Elon Musk has used the Satellite internet connection to send out a tweet for the first...

[ This is a content summary only. Visit our website https://ift.tt/1b4YgHQ for full links, other content, and more! ]

by Ali Siddiqui via Digital Information World
Posted by at No comments:
Labels:

CSS Text Effect Style 54

The post CSS Text Effect Style 54 appeared first on Best jQuery.


by Admin via Best jQuery
Posted by at No comments:
Labels: , , ,

Email Signature Style 44

The post Email Signature Style 44 appeared first on Best jQuery.


by Admin via Best jQuery
Posted by at No comments:
Labels: , , ,

DoH Trial, Tab Hover Cards, Native File System API & much more: All in Google Chrome 78 release

With the new Chrome 78 release, the users will enjoy a lot of new updates and security fixes making their life easier. To install the new update, the users need to go to the settings then help and then about Google Chrome to check for any new updates and its download. Here are some of the new...

[ This is a content summary only. Visit our website https://ift.tt/1b4YgHQ for full links, other content, and more! ]

by Madiha via Digital Information World
Posted by at No comments:
Labels:

The prohibited types of ads by the leading social media and search platforms

Before running an ad campaign, it is essential to know about the prohibited and restricted content by various online platforms. Almost all the social and search platforms have the same type of prohibited and restricted content but under their own rules. Here is the prohibited ad content on the...

[ This is a content summary only. Visit our website https://ift.tt/1b4YgHQ for full links, other content, and more! ]

by Aqsa Rasool via Digital Information World
Posted by at No comments:
Labels:

How to Build a Tic Tac Toe Game with Svelte

How to Build a Tic Tac Toe Game with Svelte

Svelte is a next generation way of building user interfaces.

While frameworks like React, Vue and Angular do the bulk of their work in the browser, Svelte takes it to the next level. It does its work when you build the app and it compiles your Svelte app to efficient vanilla JavaScript. So you get the best of both worlds. You write your code in Svelte which makes it easy to read, re-use and all the other benefits you get when you use a framework, and it makes for a blazing-fast web app as it complies down to vanilla JavaScript so that you don’t have the overhead of the JavaScript framework you’re using.

Svelte allows you to write less code. It also doesn’t use the concept of the Virtual DOM popularized by React. It instead surgically updates the DOM when the state of the app changes so the app starts fast and stays fast.

Prerequisites

For this tutorial, you need a basic knowledge of HTML, CSS and JavaScript.

You must also have installed the latest version of Node.js.

We’ll also be using npx, which comes installed by default with Node.js.

Throughout this tutorial we’ll be using yarn. If you don’t have yarn already installed, install it from here.

To make sure we’re on the same page, these are the versions used in this tutorial:

  • Node 12.10.0
  • npx 6.11.3
  • yarn 1.17.3

Getting Started with Svelte

In this tutorial, we’ll be building a Tic Tac Toe game in Svelte. By the end, you’ll be able to get up and running quickly with Svelte and get started in building your own apps in Svelte.

To get started, we must scaffold our app using degit. degit is more or less the same as git clone, but much quicker. You can learn more about it here.

Go ahead and make a new project by typing the following in the terminal:

$ npx degit sveltejs/template tic-tac-toe-svelte

npx lets you use the degit command without installing it globally.

Before npx, we would have to do the two following steps to achieve the same result:

$ npm install --global degit
$ degit sveltejs/template tic-tac-toe-svelte

Thanks to npx, we don’t bloat our global namespace, and we always use the latest version of degit.

degit clones the repo https://github.com/sveltejs/template into a tic-tac-toe-svelte folder.

Go ahead into the tic-tac-toe-svelte directory and install the dependencies by typing the following in the terminal:

$ cd tic-tac-toe-svelte
$ yarn

Now run the application by typing the following in the terminal:

$ yarn dev

Now open up the browser and go to http://localhost:5000 and you should see the following:

Svelte - Hello World

If you go into the src/ folder, you’ll see two files, App.svelte and main.js. main.js is the entry point of a Svelte app.

Open up the main.js and you should see the following:

import App from './App.svelte';

const app = new App({
    target: document.body,
    props: {
        name: 'world'
    }
});

export default app;

The above file imports App.svelte and instantiates it using a target element. It puts the component on the DOM’s document.body. It also passes name props to the App component. This prop will be accessed in App.svelte.

Components in Svelte are written using .svelte files which contain HTML, CSS and JavaScript. This will look familiar if youse worked with Vue.

Now open up App.svelte and you should see the following:

<script>
    export let name;
</script>

<style>
    h1 {
        color: purple;
    }
</style>

<h1>Hello {name}!</h1>

Firstly, we have the script tag inside, in which we have a named export called name. This should be similar to the prop mentioned in main.js.

Then we have a style tag that lets us style all the elements in that particular file, which is scoped to that file only so there’s no issue of cascading.

Then, at the bottom, we have an h1 tag, inside which we have Hello {name}!. The name in curly brackets will be replaced by the actual value. This is called value interpolation. That’s why Hello world! is printed on the screen.

Basic Structure of a Svelte Component

All .svelte files will basically have the following structure:

<script>
    /* Javascript logic */
</script>

<style>
    /* CSS styles */
</style>

<!-- HTML markup -->

The HTML markup will have some additional Svelte-specific syntax, but the rest is just plain HTML, CSS and JavaScript.

Making Tic Tac Toe in Svelte

Let’s get started with building our Tic Tac Toe game.

Replace main.js with the following:

import App from './App.svelte'

const app = new App({
  target: document.body,
})

export default app

We’ve basically removed the props property from App component instantiation.

Now replace App.svelte with the following:

<script>
  const title = "Tic Tac Toe";
</script>

<svelte:head>
  <title>{title}</title>
</svelte:head>

<h1>{title}</h1>

Here, we initialize a constant variable title with a string Tic Tac Toe.

Then, in the markup below, we use a special Svelte syntax, svelte:head, to set the title property in the head tag.

This is basically similar to doing this:

<head>
    <title>Tic Tac Toe</title>
</head>

But the advantage of using the svelte:head syntax is that the title can be changed at runtime.

We then use the same title property in our h1 tag. It should now look like this:

Svelte - Tic Tac Toe

Now create two other files in the src/ directory named Board.svelte and Square.svelte.

Open Square.svelte and paste in the following:

<script>
  export let value;
</script>

<style>
  .square {
    flex: 1 0 25%;
    width: 50px;
    height: 70px;
    background-color: whitesmoke;
    border: 2px solid black;
    margin: 5px;
    padding: 5px;
    font-size: 20px;
    text-align: center;
  }

  .square:hover {
    border: 2px solid red;
  }
</style>

<button class="square">{value}</button>

Basically, we’re creating a button and styling it.

Now open up Board.svelte and paste the following:

<script>
  import Square from "./Square.svelte";
  let squares = [null, null, null, null, null, null, null, null, null];
</script>

<style>
  .board {
    display: flex;
    flex-wrap: wrap;
    width: 300px;
  }
</style>

<div class="board">
  {#each squares as square, i}
    <Square value={i} />
  {/each}
</div>

Here we’ve imported the Square component. We’ve also initialized the squares array, which will contain our X and 0’s data which is currently null.

The post How to Build a Tic Tac Toe Game with Svelte appeared first on SitePoint.


by Akshay Kadam via SitePoint
Posted by at No comments:
Labels: , , , , , , , ,
Subscribe to: Posts (Atom)