Introduction:

In this tutorial, we'll walk you through editing your contact page, also known as the schedule consultation page. The contact page is a vital component of your website, available in all website plans. It serves as a primary point of interaction for visitors to reach out to you or schedule appointments.


Accessing the Contact Page:

  1. From Frontend: Access the contact page by clicking on the main call-to-action button, typically located in the upper right corner. Alternatively, you can navigate directly by adding "/contact" to the website URL.
  2. From Backend: In the dashboard, navigate to "Pages" and select the "Contact" page. Click on the title or the "Edit" button to access the editor.

Customization Overview:

  • The contact page consists of various sections, including page headline, header copy, contact information, and calendar embed.
  • You can customize the page to align with your branding and communication preferences.
  • Popular scheduling platforms like Calendly and Keep can be integrated into the contact page.


Customization Steps:

  1. Page Headline and Header Copy:

    • Modify the page headline to suit your purpose. For example, change it to "Book a Free Consultation."
    • Add descriptive text in the header copy section to provide additional details about your appointment or contact process.

  2. Contact Information:

    • Customize the contact information section according to your preferences.
    • Optionally, include phone numbers, addresses, or other details. You can leave these fields blank if not needed.

  3. Calendar Embed:

    • On the right-hand side, insert the calendar embed code.
    • Popular scheduling platforms like Calendly and Keep can be integrated using their respective embed codes.
    • Customize the height of the embed to ensure optimal display on the page. Adjust the pixel height as needed to prevent double scroll bars.

  4. Integration with Calendly:

    • In Calendly, access your event types and select the desired appointment type.
    • Click on "Share" and then "Add to Website" to obtain the inline embed code.
    • Copy the script code and paste it into the calendar embed section on your contact page.
    • Customize the height of the embed if required and update the page.

  5. Integration with Keep:

    • In Keep, navigate to "My Day" and then "Appointments" to find your appointment types.
    • Click on the three dots next to the appointment type and select "Embed Code."
    • Copy the provided iframe code and paste it into the calendar embed section on your contact page.
    • Adjust the height of the embed as needed and update the page.

  6. Finalizing and Previewing:

    • Review the changes and ensure all modifications are accurately reflected.
    • Update the page and refresh to view the changes on the live site.
    • Test the functionality of the embedded calendar to ensure smooth scheduling for visitors.


Conclusion:

Congratulations! You've successfully customized your contact page to facilitate easy appointment scheduling and communication with your visitors. By following these steps, you've optimized your contact page to align with your business needs and preferences.