How to Embed Mailchimp Signup Forms on mybookings

Follow

With the help of MailChimp, you can collect the guests' email addresses that would like to subscribe to the latest updates & offers. Now, this feature is available via mybookings.

Mybookings can have the MailChimp sign-up forms embedded within it. Please note, this sign-up form can only be added at the very end of the booking on the Confirmation Page where it shows all of the reservation information.

Getting Started

The prerequisites to embed this feature requires a Mailchimp account. If you don’t currently have an account, you can sign up here. To embed Mailchimp, please follow the steps below. 

Mailchimp Instructions

First, login to your Mailchimp account.

  1. Access 'Audience' tab
  2. Click on 'Manage Audience'
  3. Then, select 'Signup forms'
Audience dashboard | Mailchimp - Google Chrome

4. On this window, you can see a few options. Go ahead and choose 'Embedded forms'

Signup forms for Cloudbeds | Mailchimp - Google Chrome

5. Choose a form type - Classic, Condensed, Horizontal, or Unstyled - and customize the Form Options

If you have any questions about form options and settings, please contact the Mailchimp support team directly. Click here to check an article from Mailchimp knowledge base for further information.

Embedded Form Code | Mailchimp - Google Chrome

We will use the Classic Format as an example:

6. Scroll down and highlight all the code (Control + A) or left-click to copy the code

Embedded Form Code | Mailchimp - Google Chrome

How to add the code on mybookings

Login to your myfrontdesk account:

  1. Click on 'Customize mybookings'
  2. Paste the code into the section entitled 'Javascript Code (Confirmation Page Only)'
  3. Then, Click 'Save'
DEMO - Karina's Hostel - Customize mybookings - Google Chrome

We recommend a test in order to view the format

Open your mybookings page to create a test reservation. On the confirmation page, scroll down; the sign-up form will be displayed directly under the property information.

Confirmation - DEMO - Karina's Hostel - Google Chrome

Once the information is stored within your Mailchimp account, you may send marketing emails to the guests via Mailchimp. 

Please note: This information will only be stored within Mailchimp and not within myfrontdesk.

Advanced Options

Creating Custom Styles on the Mailchimp form

If you want to centralize the sign-up form on your booking engine page (along with all the other sections above the form), use the following code in the section entitled 'Javascript Code (Confirmation Page Only)'

<style>
#mc_embed_signup{ 
background:#fff; 
clear:left; 
font:14px Helvetica,Arial,sans-serif; 
margin-left: 90px; 
margin-right: 125px; 
margin-bottom: 40px;
width: 80%; 
text-align:center; }@media (min-width: 1460px) {
  #mc_embed_signup { 
margin-left: 150px; 
margin-right: 145px; 
margin-bottom: 60px; 
}
}
</style>

Styling of mybookings Booking Engine

The following code will hide the property information along with the map

<style>
/* Following code will hide the property information along with the map */
.page-content-wrapper {
display: none;
}
</style>
Confirmation - DEMO - Karina's Hostel - Google Chrome

The following code will hide the property information along with the map on a mobile phone browser

<style>
@media (min-width: 992px) {
.page-content-wrapper{
display: none;
}
}
<style>

The following code will hide the security payment logo

<style>
.bank_transfer, .security-sprite {
display: none !important;
}
</style>
Confirmation - DEMO - Karina's Hostel - Google Chrome
Confirmation - DEMO - Karina's Hostel - Google Chrome
Powered by Zendesk