[Appointments+] html in pending confirmation email

Is there any way that I can add html to the pending confirmation email that's send to admin?
https://cdn.livechat-static.com/api/file/v2/lc/att-old/8801096/a8fdfd004877c3c886eb2781f9af1825/Screen%20Shot%202561-11-25%20at%2016.10.33.png

  • Kasia Swiderska

    Hello Bamboo,

    HTML in email add-on is basically only for the emails that are sent to clients that are booking appointments.
    Notifications for admin are not covered by that add-on.

    However, I can see there is a filter in the plugin code that might help with changing that email so it will contain HTML as well.
    I will need to further consult this with the developer to get an example code snippet that would work for you.
    I will post the solution as soon I will get it.

    kind regards,
    Kasia

  • Konstantinos Xenos

    Hi Bamboo !

    I've created a mu-plugin for you so you can change the e-mail message ( body ) to add any html that you like and modify it. You can see a small preview and the code at the end of this reply as well.

    How to install:
    Always make sure to keep a backup of your site before changing/adding custom code.

    1] Navigate to your /wp-content/ directory and create a new one named mu-plugins if it doesn't exist.
    2] Download the attached .zip and extract it. You will find a file named appointments-change-pending-mail-body.php
    3] Upload the file from the .zip into the mu-plugins directory.
    4] The final path should look like /wp-content/mu-plugins/appointments-change-pending-mail-body.php
    5] Everything should work after that automatically.

    You will have to alter the $body on the "change_email_body" function to anything you like. I've made a simple start just to have it as a preview.

    Tell me if you need further help with this !

    Preview:

    Code Preview:

    <?php
    
    /**
     * Plugin Name: Appointments - Change Pending E-mail Body
     * Plugin URI: https://premium.wpmudev.org/
     * Description: mu-plugin for changing the Appointments pending body message.
     * Version: 1.0.0
     * Author: Konstantinos Xenos @ WPMUDEV
     * Author URI: https://premium.wpmudev.org/
     * License: GPLv2 or later
     */
    
    class Change_Pending_App_Notification {
    	/**
    	 * Constructor.
    	 */
    	public function __construct() {
    		add_filter( 'app-messages-worker-notification', array( $this, 'change_email_body' ), 15, 3 );
    	}
    
    	/**
    	 * Change the body of the mail
    	 *
    	 * @param string $body The body of the e-mail.
    	 * @param array  $r Request.
    	 * @param int    $app_id The Application ID.
    	 *
    	 * @return string $new_body The new body of the e-mail.
    	 */
    	public function change_email_body( $body, $r, $app_id ) {
    		add_filter( 'app-emails-content_type', array( $this, 'change_email_content_type' ) );
    
    		$body  = '<p style="color:green;"><strong>New pending Appointment with ID ' . $app_id . '!</strong></p>';
    		$body .= '<p>You can edit it clicking <a href="' . admin_url() . 'admin.php?page=appointments&type=pending">HERE</a></p>';
    
    		return $body;
    	}
    
    	/**
    	 * Changes the e-mail headers to text/html.
    	 *
    	 * @return string Header content type of text/html.
    	 */
    	public function change_email_content_type() {
    		$content_type = 'text/html';
    
    		return $content_type;
    	}
    
    }
    new Change_Pending_App_Notification();
  • Bamboo

    Here is the HTML file please guide me how can i put this code inside of the php code.

    THX

    I can't upload the raw html file so i will paste it here

    `<!DOCTYPE html>
    <html lang="th">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>T.K.K. International Co., Ltd.</title>
    </head>
    <main>
    <body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="background-color: #f5f5f5;">
    <div id="wrapper" dir="ltr" style="background-color: #f5f5f5; margin: 0; padding: 70px 0 70px 0; width: 100%; -webkit-text-size-adjust: none;">
    <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="font-family: kanit;"><tr>
    <td align="center" valign="top" style="color: #737373; font-family: kanit;">
    <div id="template_header_image">
    <p style="margin-top: 0; font-family: kanit;"><img src="https://www.tkkinter.com/wp-content/uploads/2018/10/TKK-Black-144X144.png" alt="T.K.K. International Co., Ltd." style="border: none; display: inline-block; font-size: 14px; font-weight: bold; height: auto; outline: none; text-decoration: none; text-transform: capitalize; vertical-align: middle; margin-right: 10px;"></p> </div>
    <table border="0" cellpadding="0" cellspacing="0" width="600" id="template_container" style="background-color: #fdfdfd; border: 1px solid #dedede; width: 600px; font-family: kanit; box-shadow: 0 1px 16px 4px rgba(0,0,0,0.1); border-radius: 3px;">
    <tr>
    <td align="center" valign="top" style="color: #737373; font-family: kanit;">
    <!-- Header -->
    <table border="0" cellpadding="0" cellspacing="0" width="600" id="template_header" style="background-color: #000000; color: #ffffff; border-bottom: 0; font-weight: 300; line-height: 100%; vertical-align: middle; width: 600px; font-family: kanit; border-radius: 3px 3px 0 0;"><tr>
    <td id="header_wrapper" style="color: #737373; padding: 36px 48px; display: block; padding-top: 41px; padding-bottom: 41px; padding-left: 48px; padding-right: 48px; font-family: kanit;">

    <h4 style="color: #ffffff; font-size: 25px; font-weight: 300; line-height: 150%; margin: 0; text-align: center; text-shadow: 0 1px 0 #ab79a1; font-family: kanit;">An appointment requires your confirmation</h4>

    </td>
    </tr></table>
    <!-- End Header -->
    </td>
    </tr>
    <tr>
    <td align="center" valign="top" style="color: #737373; font-family: kanit;">
    <!-- Body -->
    <table border="0" cellpadding="0" cellspacing="0" width="600" id="template_body" style="width: 600px; font-family: kanit;"><tr>
    <td valign="top" id="body_content" style="color: #737373; background-color: #fdfdfd; font-family: kanit;">
    <!-- Content -->
    <table border="0" cellpadding="20" cellspacing="0" width="100%" style="font-family: kanit;"><tr>
    <td valign="top" style="color: #737373; padding: 32px; font-family: kanit;">
    <div id="body_content_inner" style='color: #333333; font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-size: 14px; line-height: 150%; text-align: left; margin-bottom: -40px;'>
    <p style="margin: 0 0 20px; font-family: kanit;">The new appointment has an ID 715 and you can edit it clicking this button below</p>

    <!-- custom button -->

    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnButtonBlock" style="min-width: 100%; border-collapse: collapse; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: kanit; margin-bottom: 30px;"><tbody class="mcnButtonBlockOuter"><tr>
    <td id="buttoninner" valign="top" align="center" class="mcnButtonBlockInner" style="color: #737373; padding: 12px; padding-top: 0; padding-right: 18px; padding-bottom: 0px; padding-left: 18px; mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: kanit;">
    <table border="0" cellpadding="0" cellspacing="0" class="mcnButtonContentContainer" style="border-radius: 3px; background-color: #000000; mso-table-lspace: 0pt; mso-table-rspace: 0pt; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: kanit; border-collapse: separate;"><tbody><tr>
    <td id="buttonlink" align="center" valign="middle" class="mcnButtonContent" style="color: #737373; padding: 15px; font-size: 16px; mso-line-height-rule: exactly; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-family: kanit;">
    Manage Now
    </td>
    </tr></tbody></table></td></table>

    <!-- custom table for appointment details-->

    <!-- End of the style here -->

    <!-- End Content -->
    </td>
    </tr></table>
    <!-- End Body -->

    <!-- End Footer -->
    </td>
    </tr>
    </table>
    </td>
    </tr></table></main>

    <!-- Custom Social network and Footer -->
    <tr>
    <td align="center" valign="top" id="templateFooter" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;padding-right: 10px;padding-left: 10px;">
    <!-- BEGIN FOOTER // -->
    <!--[if (gte mso 9)|(IE)]>
    <table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
    <tr>
    <td align="center" valign="top">
    <![endif]-->
    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="templateContainer" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;max-width: 600px;">
    <tr>
    <td valign="top" class="footerContainer" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;padding-top: 0px;padding-bottom: 36px;"><table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnFollowBlock" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
    <tbody class="mcnFollowBlockOuter">
    <tr>
    <td align="center" valign="top" style="padding: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" class="mcnFollowBlockInner">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="mcnFollowContentContainer" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
    <tbody><tr>
    <td align="center" style="padding-left: 9px;padding-right: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" style="min-width: 100%;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;" class="mcnFollowContent">
    <tbody><tr>
    <td align="center" valign="top" style="padding-top: 9px;padding-right: 9px;padding-left: 9px;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
    <table align="center" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
    <tbody><tr>
    <td align="center" valign="top" style="mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;">
    <!--[if mso]>
    <table align="center" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <![endif]-->

    <!--[if mso]>
    <td align="center" valign="top">
    <![endif]-->

    <!--Social Network Footer copy & edit here !!!! -->

    <table align="left" border="0" cellpadding="0" cellspacing="0" style="display:inline;border-collapse:collapse">
    <tbody>
    <tr>
    <td valign="top" style="padding-right:10px;padding-bottom:9px" class="gmail-mcnFollowContentItemContainer">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="gmail-mcnFollowContentItem" style="border-collapse:collapse">
    <tbody>
    <tr>
    <td align="left" valign="middle" style="padding:5px 10px 5px 9px">
    <table align="left" border="0" cellpadding="0" cellspacing="0" width="" style="border-collapse:collapse">
    <tbody>
    <tr>

    <td align="center" valign="middle" width="24" class="gmail-mcnFollowIconContent" style="text-size-adjust: 100%;">
    <img src="https://cdn-images.mailchimp.com/icons/social-block-v2/dark-facebook-48.png" style="display: block; border: 0px; height: auto; outline: none; text-decoration: none;" height="24" width="24" class="gmail-">
    </td>

    <td align="left" valign="middle" class="gmail-mcnFollowTextContent" style="padding-left:5px">
    Facebook
    </td>

    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>

    <table align="left" border="0" cellpadding="0" cellspacing="0" style="display:inline;border-collapse:collapse">
    <tbody>
    <tr>
    <td valign="top" style="padding-right:10px;padding-bottom:9px" class="gmail-mcnFollowContentItemContainer">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="gmail-mcnFollowContentItem" style="border-collapse:collapse">
    <tbody>
    <tr>
    <td align="left" valign="middle" style="padding:5px 10px 5px 9px">
    <table align="left" border="0" cellpadding="0" cellspacing="0" width="" style="border-collapse:collapse">
    <tbody>
    <tr>

    <td align="center" valign="middle" width="24" class="gmail-mcnFollowIconContent" style="text-size-adjust: 100%;">
    <img src="https://cdn-images.mailchimp.com/icons/social-block-v2/dark-instagram-48.png" style="display: block; border: 0px; height: auto; outline: none; text-decoration: none;" height="24" width="24" class="gmail-">
    </td>

    <td align="left" valign="middle" class="gmail-mcnFollowTextContent" style="padding-left:5px">
    Instagram
    </td>

    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>

    <table align="left" border="0" cellpadding="0" cellspacing="0" style="display:inline;border-collapse:collapse">
    <tbody>
    <tr>
    <td valign="top" style="padding-right:0px;padding-bottom:9px" class="gmail-mcnFollowContentItemContainer">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="gmail-mcnFollowContentItem" style="border-collapse:collapse">
    <tbody>
    <tr>
    <td align="left" valign="middle" style="padding:5px 10px 5px 9px">
    <table align="left" border="0" cellpadding="0" cellspacing="0" width="" style="border-collapse:collapse">
    <tbody>
    <tr>

    <td align="center" valign="middle" width="24" class="gmail-mcnFollowIconContent" style="text-size-adjust: 100%;">
    <img src="https://cdn-images.mailchimp.com/icons/social-block-v2/dark-forwardtofriend-48.png" style="display: block; border: 0px; height: auto; outline: none; text-decoration: none;" height="24" width="24" class="gmail-">
    </td>

    <td align="left" valign="middle" class="gmail-mcnFollowTextContent" style="padding-left:5px">
    Email
    </td>

    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>

    </td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>

    </td>
    </tr>
    </tbody>
    </table>
    <table border="0" cellpadding="0" cellspacing="0" width="100%" class="gmail-mcnTextBlock" style="min-width:100%;border-collapse:collapse">
    <tbody class="gmail-mcnTextBlockOuter">
    <tr>
    <td valign="top" class="gmail-mcnTextBlockInner" style="padding-top:9px">

    <table align="left" border="0" cellpadding="0" cellspacing="0" style="max-width:100%;min-width:100%;border-collapse:collapse" width="100%" class="gmail-mcnTextContentContainer">
    <tbody>
    <tr>

    <td valign="top" class="gmail-mcnTextContent" style="padding:0px 18px 9px;font-family:Arial,"helvetica neue00026quot: ;, helvetica, sans-serif: ;font-size: 13px;line-height: 125%;text-align: center;mso-line-height-rule: exactly;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;word-break: break-word;color: #000000;">

    <h4 style="text-align:center;display:block;margin:0px;padding:0px;font-size:13px;font-style:normal;letter-spacing:normal;line-height:1.3;font-weight:300;color:#000000;text-decoration:none;font-family:Kanit">© 2018 T.K.K. International Co., Ltd.®
    165 ????????????? • ???????????? ?????????? • ???????? 10330
    Contact Us  •  Terms of Use  •  Privacy Policy
    </h4>

    </td>
    </tr>
    </tbody>
    </table>

    </td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>

    <!-- custom style end here -->
    </div>
    </body>
    </html>

  • Konstantinos Xenos

    Hi Bamboo ,

    Could you please download and replace the previous file with the one from https://gist.github.com/wpmudev-sls/ab08d64559ca6bfdd533bcf84a61e5ec . You will see a download button on the top right corner.

    I've added
    add_filter( 'app-messages-notification-body', array( $this, 'change_email_body' ), 15, 3 );
    as well to change the Admin e-mails, previously it was implementing HTML on the 'service providers' emails only. Sorry I misunderstood the OP.

    As for the html you provided above, since the forum has changed some of the styling etc, could you please paste your code somewhere online i.e. Pastebin or upload that html somewhere on your website and give me a link so I can copy it from there and have it 100% clean to help you out if you want?

    Regards,
    Konstantinos

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.