Elementor – Appointment Scheduler Popup

Anthony B. December 6, 2020 0 Comments
Table of Contents

Introduction #

Do you like the appointment scheduler on the front page? Have you seen it?  If not, here is an example.

Click here

In this tutorial, we are going to build a simple plugin that makes this work.  It uses a couple hooks that you can use to modify any styles of any shortcode enabled output.

Prerequisites #

Make sure you have the following things taken care of before you begin.

1. Creating the Plugin file #

We will create a small plugin that will enable the popup to work.  There are many ways to accomplish this task, including creating custom css and javascript and either embedding it directly into the site or into custom files.  However, a plugin allows you to activate and deactivate features easily, and as you build out your WordPress site, you will be able to add all of your customizations in one place.   We do not recommend using the theme’s functions.php file, since that is theme specific, and may be overwritten when your theme is updated. Upload the file to the location identified in the header of the code block. You will need to create the missing  ssa-popup directory.   Note: the $attr['type'] is set to consultation-phone-call. You will either need to change this type to the type you created, or remove it all together if you would like the popup to work for all appointment types.  
wp-content/plugins/ssa-popup/ssa-popup.php
<?php

 /*  
  * Plugin Name: SS Popup
  * Plugin URI: https://brunstar.com/
  * Description: A simple plugin to show a popup for scheduling appointments.
  * Version: 1.0
  * Author: Anthony Brunson
  * Author URI: https://brunstar.com/
  */



add_action( 'wp_enqueue_scripts', 'ss_p_register_my_scripts' );
add_filter( 'do_shortcode_tag', 'ss_p_enqueue_my_script', 10, 3 );

function ss_p_register_my_scripts(){
      wp_register_script('simply-schedule-appointments-js', plugins_url( '/ssa-popup/simply_schedule_appointments.js' ));
      wp_register_style('simply-schedule-appointments-css', plugins_url( '/ssa-popup/simply_schedule_appointments.css' ));
}
    
function ss_p_enqueue_my_script($output, $tag, $attr){
    if('ssa_booking' != $tag){ //make sure it is the right shortcode
          return $output;
    }
    if(!isset($attr['type']) && $attr['type'] != 'consultation-phone-call'){ //you can even check for specific attributes
      return $output;
    }

    wp_enqueue_style('simply-schedule-appointments-css');
    
    
    wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js', array(), null, true);

    wp_enqueue_script('simply-schedule-appointments-js');
    return $output;
}

?>

2. Creating the .js file #

Once you finish creating the plugin file, you will create 2 more files. The first is a .js file. This will store the javascript you will need to make this work. Upload the file to the location identified in the header of the code block.

wp-content/plugins/ssa-popup/simply_schedule_appointments.js

jQuery(document).ready(function(){

    document.getElementById('btn_schedule_demo').onclick = function() {
        document.getElementById('modal_scheduler').style.display='block';
    };

    // Get the modal
    var modal = document.getElementById('modal_scheduler');

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
        console.log(event.target);
    }
  });

3. Creating the .css file #

The final file is your css file. This will allow you to define all of the styles that affect the visibility of the element on the screen, along with anything else you choose to modify. Upload the file to the location identified in the header of the code block.

wp-content/plugins/ssa-popup/simply_schedule_appointments.css

.modal {
      display: none; /* Hidden by default */
      position: fixed; /* Stay in place */
      z-index: 2; /* Sit on top */
      padding-top: 100px; /* Location of the box */
      left: 0;
      top: 0;
      width: 100%; /* Full width */
      height: 100%; /* Full height */
      overflow: auto; /* Enable scroll if needed */
      background-color: rgb(0,0,0); /* Fallback color */
      background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Add Zoom Animation */
.animate {
     -webkit-animation: animatezoom 0.6s;
     animation: animatezoom 0.6s;
}

@-webkit-keyframes animatezoom {
     from {-webkit-transform: scale(0)}
     to {-webkit-transform: scale(1)}
}

@keyframes animatezoom {
     from {transform: scale(0)}
     to {transform: scale(1)}
}

4. Adding the scheduler to your page #

This tutorial is not going to go over how to set your availability in the scheduler. Once the plugin is installed, you should have walked through that already. Now that you have the plugin code complete, you can add the scheduler to your page in the location of your choice.

 

IMPORTANT:

  • Since the wordpress hooks use shortcode hooks, you will need to insert shortcode into your page.
  • Notice the consultation type matches the code we have above.  If you have a different type, you will need to make sure the javascript code matches the type listed here.
Simply Schedule Appointments - Elementor

We will be configuring a few sections here. 

 

First, the animate class we created above will be applied to the column that contains the scheduler.

Simply Schedule Appointments - Elementor

Next we will apply the modal id to the modal, along with the modal class which will hide the modal. The modal is at the section level, so make sure that is selected.

Simply Schedule Appointments - Elementor

5. Adding a button to your page #

Finally, you need to add a button to your page, and set it’s id to match the id you set in the js file. We used btn_schedule_demo as the id.

Now you can test your creation.  Once complete, you should be able to click the button, and see something like this. Go ahead and click it.

Click here

Conclusion #

In this tutorial, you configured the Simply Schedule Appointments plugin to display as a modal popup on your elementor page. Now that you have your functionality enabled, you can apply this to any custom modules or locations in your website.

Sources #

w3schools – How TO – Modal Images

Powered by BetterDocs

Leave a Reply

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