How to add HealCode Links to your Facebook Page (Advanced)

Follow

If you want to add HealCode Links, usually Buy Now Links, to your Facebook Page, you will need to use an app called "Custom Page Tab" made by Woobox.

 

1. Install Woobox to your Facebook Page

  1. Go here: https://apps.facebook.com/iframehost-a/
  2. Click Install Page Tab
  3. Login to your Facebook Page user account
  4. On the Add Page Tab screen, select your Facebook Page
  5. Click Add Page Tab

 

2. Edit the Custom Page Tab

When the tab is first added, it will likely have the title Welcome. You can edit that using this support page:

https://www.facebook.com/help/371634529571035/

  1. Click the Configure Page Tab button
  2. You will be sent to the HTML Fangate Tab to edit your Custom Page Tab HTML; ensure you are on the Edit Tab Content page
  3. Scroll to Page Source; ensure the content is set to HTML

 

 

3. Adding the names of the Pricing Options

  1. Click on Source in the editor to use the visual editor
  2. Type out the names and prices of the Pricing Options you intend to add using HealCode Buy Now Links
  3. Adjust the spacing, font size, font color, and font family (i.e. Arial, Times)

 

4. Adding the Buy Now Links using the HTML editor

  1. Click on the Source button in the editor to switch to HTML
  2. At the top of the text box, before "Example Pricing Table" in our example, add the following code: <script src="https://widgets.healcode.com/javascripts/healcode.js" type="text/javascript"></script>
  3. After each Pricing Option name, add your Buy Now Link code; for more information on finding this code, see this FAQ.

 

5. Stylize the Buy Now Links

  • In our example, we aligned everything to the center after adding the Buy Now Links.
  • You can use CSS Button Generator to customize a button with colors, borders, etc.
  • If you use this website, make sure you replace ".btn" with "healcode-widget a"
  • We have used the CSS Button Generator to produce the buttons seen in our example below. You can also find our source code at the bottom of this document.

 

 

Source Code

Note: If you use our source code, you WILL have to adjust the Buy Now Link code and Pricing Option names.

<script src="https://widgets.healcode.com/javascripts/healcode.js" type="text/javascript"></script>

<h1 style="text-align: center;">Example Pricing Table</h1>

<p style="text-align: center;">&nbsp;</p>

<h2 style="text-align: center;">Single Class Drop In $20</h2>

<p style="text-align: center;"><healcode-widget data-inner-html="Buy Now" data-service-id="55" data-site-id="8516" data-type="pricing-link" data-version="0.2"></healcode-widget></p>

<p style="text-align: center;">&nbsp;</p>

<h2 style="text-align: center;">5 Class Pack $50</h2>

<p style="text-align: center;"><healcode-widget data-inner-html="Buy Now" data-service-id="10043" data-site-id="8516" data-type="pricing-link" data-version="0.2"></healcode-widget></p>

<h2 style="text-align: center;">&nbsp;</h2>

<h2 style="text-align: center;">10 Class Pack $80</h2>

<p style="text-align: center;"><healcode-widget data-inner-html="Buy Now" data-service-id="10048" data-site-id="8516" data-type="pricing-link" data-version="0.2"></healcode-widget></p>

<p style="text-align: center;">&nbsp;</p>

<p>&nbsp;</p>

<style>
healcode-widget a {
background: #2bb4d6;
background-image: -webkit-linear-gradient(top, #2bb4d6, #27b3b3);
background-image: -moz-linear-gradient(top, #2bb4d6, #27b3b3);
background-image: -ms-linear-gradient(top, #2bb4d6, #27b3b3);
background-image: -o-linear-gradient(top, #2bb4d6, #27b3b3);
background-image: linear-gradient(to bottom, #2bb4d6, #27b3b3);
-webkit-border-radius: 10;
-moz-border-radius: 10;
border-radius: 10px;
font-family: Georgia;
color: #ffffff;
font-size: 17px;
padding: 8px 16px 8px 16px;
text-decoration: none;
}

healcode-widget a:hover {
background: #2bb4d6;
text-decoration: none;
}
</style>

Have more questions? Submit a request

Comments

Powered by Zendesk