Included Below

About Enhanced Messages

Adding media to a Message is typically used to give virtual tours or show imagery of attractions and activities.

When using Text Editor to add images or other media, that media must be hosted and accessible online; media that only resides on your desktop cannot be added.

To host media so that it is available online, you must upload the file(s) to services such as Google Drive or OneDrive, or to your web server, or they must already be a component of your website.

Add an Image to a Message

1. Browse to the page containing the image you wish to use.
   
   
2. From your browser, right-click on the image you wish to use, select “Inspect” or “Inspect Elements” (verbiage varies with browser).
   
   
   
   
   
3. A window will appear to the right or below your page, containing code for the page, as well as code for the image. Most browsers will have highlighted the specific code for the image you right-clicked.
   
   
4. Select and copy the code snippet that begins with “img”, ensuring that the code snippet begins with “<” and ends with “>”.
   
   Some browsers include a “find” feature in the right corner, to make searching for this information easier.
   
   Example: <img width="350" height="161" src="https://b4checkin.com/wp-content/uploads/2015/09/chameleon-logo-homepage3-e1442437810671.png"> 
   
   
    
   
   
   
5. In the b4checkin Admin Site, select the Message to which this image will be added.
   
   
6. Select “Source” on the Text Editor.
   
   
7. Paste the "img" code snippet into the message box, ensuring that the code snippet begins with “<” and ends with “>”.
   
   
8. Adjust the width and height to 100%. This will make the photo responsive to mobile devices and different sized screens.
   
   Note: if the height and width are not included in the code provided, add these details to ensure that the item is mobile responsive.
    
   Example: <img width=100% height=100% src="https://b4checkin.com/wp-content/uploads/2015/09/chameleon-logo-homepage3-e1442437810671.png">.
   
   
   
   
   
9. Un-select “Source” to preview the image in the message screen. 
   
   
   
   
   
   
10. Save. 
    
    
    
    
    
    
11. Inspect the image you added from within the product, as a booker would see it, to ensure the image displays as you intended.
    
    
    

Add a Social Media Icon & Link to a Message

Social media icons for Facebook, Instagram, Twitter or Tripadvisor can be added to b4checkin products wherever custom Messages appear.

You first add the icon, and then attach the link to the icon.

1. Select “Settings” then “Manage Messages”.
   
   
2. Select “+Add a Message”.
   
   
3. Select one of the following:
   
   “Link to Facebook”,
   “Link to Twitter”,
   “Link to Instagram”,
   “Link to TripAdvisor”.
   
   
   
   
   
   
4. Insert the link to the selected social media page.
   
   
5. Select “Source” on the text editor.
   
   
6. Replace the text in between “>” and “</a>” with the following:
   
   
   1. Facebook: <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAWCAYAAAAb+hYkAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OTgyOTkyNkY3MEU4MTFFNTg2QzdEMjNCRkREMjMyMjIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OTgyOTkyNzA3MEU4MTFFNTg2QzdEMjNCRkREMjMyMjIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5ODI5OTI2RDcwRTgxMUU1ODZDN0QyM0JGREQyMzIyMiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5ODI5OTI2RTcwRTgxMUU1ODZDN0QyM0JGREQyMzIyMiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pm0himIAAAGMSURBVHjavJS9SsRAFIVnJqNr/EVZglbWlj6AIFgIIunEBxAES/E5bGxF8AGsUgv6BBZ2PsBCiLusrqir+fPccAaGJSBYOPCRSe65M3NPcqPzPFdZlqmyLFXLmAULYAroIAiKKIoym6apiuNY9ft9X6zBGjgEB5wH3W73OUmS2FZV1ezU6/X8hHVwAbbAIjASgNYIVmutjDH+LiI6Azs8XqMXoCtEb1vqWAX7IAQ1GIEnMACv4HMySQreYPFyzHdwDc5FzEWGk0maCe683+ABpCB3IkthyGvAZ/4wjE9zp+Z48+AIzDBxk3PF6x4tl4QxuJKkJXBCA1xdfpKYsst7OeaNO94crVYtNYZExps8s3wHL6DDQIeLGMbEwS/GRFdZ+n/KQkW4DY5Z6we4BPdcQNwcWBZ359WzwqCz/BHcepYXzt7Cs7diLa4muS89jTIthevfnhn1h/GPSXVdS3NNLmRa5o1O9FYaEH3vN+KYn8uI72nsAmj3RqdbfizSrcue/UMmK/xYmg1+BBgA5XF5rsitHhwAAAAASUVORK5CYII=" />
      
      
   2. Twitter:  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAA9UlEQVQ4jaXSMUpDQRAG4M8YLCSliAcQK7EWG0WsgqWIhaUHEPEWKS08gJWNjZXYCCLaRLyBhYgiFoqChYZYvF15rO8tCRkYGGbm/2d2/mVEGx+wbwbbWMI7XkO+BdPYy4BXAqgf/BuHOA+E2qHQQTMBN/FQApe9i11YTJJtNALBXA24jzNMCs3dpPiIIxxkCHbimqs4RS/TXOXrkWAKH0OCewpl/mwTX0MQXCXH1sKxQqJBCDYiMF77Ey/+y1hlFzipK27hMjP5Pn17oxTPKnSfryG/wzKe08IarjNTn7CPiSrWsVK8oPiVccU33OIGPzVbjW6/JZNzwlXOebIAAAAASUVORK5CYII=" />
      
      
   3. Instagram: <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QTZDOUU3NTU3MEU4MTFFNTkwNzc4MTNEQjMwQjFDM0IiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QTZDOUU3NTY3MEU4MTFFNTkwNzc4MTNEQjMwQjFDM0IiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBNkM5RTc1MzcwRTgxMUU1OTA3NzgxM0RCMzBCMUMzQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBNkM5RTc1NDcwRTgxMUU1OTA3NzgxM0RCMzBCMUMzQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Ph86eNcAAAHzSURBVHjatJW5SgNhFIUzSxLF4EZIp6KFqIiFgqKgFhERhbyCaCO+gA9hI4KVCir2FrFxbXwEcelUlECMKeISTTLJxHPhDAxjzKo/fGSYuffk3jvn/0cxDEOJxWLNuVyuweVyKa7aVl7TtGQgEEjo0Wi0ORQKrcbj8SAe6DUKZ/1+/1k4HF7RTdNsQMXBSCTSWUllwAQpXkunbgF6U8CnK1iqqlZaqYg9ggOKi+gwGBMt0ay2dan2DqyDBPCAZTBkBdQy0xxIgndQB9LspGZhyW3hfKXierur9ApmmuK1VKeCAbABDKCBLoonyhWWlh/AMeOnQAdoBUFbnErKqlgqvQfz4Jqt9oBd0E03/Don+5v+AG/85wDIgCNwxfuybsAJaONsY8z1gUZ7+db6AttgEszSp8W2uMKYOTBB6yULCUvbn+AZPLEyaXUG9IMm0gem+eyG4lHmFrSbwrer0pt7NLxs9X2ORKNoO0ewx1gPn5W0m1joFGyCJQotMFFyXsAWOGOsp9jLc65XsAYuwSLo5f1bsAPOLc+WcoU157xD/BBcAC/vpemQTJG8H8Iad5bpcMQXsZbb4WEvcwsKS+AIZ2o4HFNqE4nouH3Weh4LB3OWwqNgsIoDyTqIPKIlmjoOZvlGneP3rz5NopVU/utj+i3AAOsookxx/2XkAAAAAElFTkSuQmCC" />
      
      
   4. TripAdvisor: 

      <div id="TA_socialButtonIcon372" class="TA_socialButtonIcon">

      <ul id="hm0Oi7t" class="TA_links XOK2iKguwJ">

      <li id="kQ1XPxBK1YlL" class="h41T9nVW4">

      <a target="_blank"your property TripAdvisor Page"><img src="https://www.tripadvisor.com/img/cdsi/img2/branding/socialWidget/20x28_green-21690-2.png"/></a>

      </li>

      </ul>

      </div>

      <script src="https://www.jscache.com/wejs?wtype=socialButtonIcon&amp;uniq=372&amp;locationId=150723&amp;color=green&amp;size=rect&amp;lang=en_US&amp;display_version=2"></script>

   
   
   
   
   
   
   
   
   
7. Unselect “Source” to preview the icon in the message screen.
   
   

8. Save. 
   
   
   

   
   
   

9. Inspect the live message to confirm the icon appears as intended, and links to the correct page.
   
   

Add a Google Map to a Message

A Google Map can be added to the confirmation page of chameleon™ so travelers can easily find you.

1. Find your location in Google Maps.
    
2. Select the “Share” button.
    
   
   
    
   
   
3. Select “Embed Map”.
   
   
4. Select preferred map size.
    
5. Copy the code that appears. 
   
    
   
    
   
   
6. Select “Property Settings” then “Manage Messages”. 
    
   
   
   
    
   
   
7. Select “+Add a Message”.
     
8. Message type will be “Link to Google Maps”.
    
9. Select “Source” on the Text Editor.
   
   
10. Paste the code from Google Maps. 
    
     
    
    
    
11. Un-select “Source” to preview the Google map in the message screen.
    
     
    
     
    
    
12. Save. 
    
    
    
    
     
13. Inspect the live map to ensure it appears as you intended.
    
    
    
    

Add a Video from YouTube to a Message

1. Play the video in YouTube.
   
   
2. Right-click on the playing video, and select “Copy Embed Code”.
   
   
   
   
   
   
3. Select the Message where this the video is to be added.
   
   
4. Select “Source” on the Text Editor.
   
   
5. Paste the Embed Code into the message text box, ensuring that the pasted data begins with “<” and ends with “>”.
   
   
6. Adjust the width and height to 100%. This will make the photo responsive to mobile devices and different screen sizes.
   
   
   1. Note: if the height and width are not included in the code provided, add those details to ensure it will be mobile responsive.
      
      Example: <iframe width=100% height=100% src="https://www.youtube.com/embed/78RUGbKkMFI" frameborder="0".
      
      
      
      
      
      
7. Un-select “Source” to preview the video in the message screen.
   
   
   
   
   
   
8. Save. 
   
   
   
   
   
   
9. Inspect the live page to which you have added the video to ensure it looks and plays as you intended.

Add a Video from Vimeo to a Message

1. Play the video on Vimeo.
   
   

2. Select the “Share” button.
   
   
   
   
   
   

3. Copy and paste the text that appears in the “Embed” section. 
   
   
   
   
   
   
4. Select the Message where you wish to add the video.
   
   
5. Select “Source” on the Text Editor.
   
   
6. Paste the code from step 3 into the message text box, ensuring that the pasted data begins with “<” and ends with “>”.
   
   
7. Adjust the width and height to 100%. This will make the photo responsive to mobile devices and different sized screens.
   
   
   1. Note: if the height and width are not included in the code provided, add those details to ensure that the item is mobile responsive.
      
      Example: <iframe src="https://player.vimeo.com/video/190761712" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="https://vimeo.com/190761712">Chameleon_explainer_video-V2_sm</a> from <a href="https://vimeo.com/user58847503">b4checkin</a> on <a href="https://vimeo.com">Vimeo</a>.</p>.
      
      
      
      
      
      
      
8. Un-select “Source” to preview the video in the message screen.
   
   
   
   
   
   
9. Save. 
   
   
   
   
   
   
10. Inspect the page to which you have added the Video, to ensure the video looks and plays as intended.