On all of our default web pages, you can now see WhatsApp as an available social share option. If you are using a default theme or have not create a custom page template, you will not need to make any changes. However, if you are using custom themes or custom page templates, the new WhatsApp button has not automatically applied to your website.
Recruiter Pages
To add the WhatsApp button to a recruiter page, follow these steps:
Login to your control panel and go to the Website tab.
Click on the website that holds your recruiter page you are working on.
Locate your recruiter page by searching for it in the quick search in the upper right corner or by navigating through your website pages in the control panel.
Click on your recruiter page slug and navigate to the Template tab.
You should see a code editor on this page, but if you don’t go ahead and click on “Create a custom template”.
Scroll down within the code editor and find a spot where you would like to add the WhatsApp button. You can use the white text in the code editor to see the headers of the different sharing options.
Once you have found a spot to add the button, paste in the button code.
Click on “Save and publish changes”. This will push the changes live to your website and you will now be able to see the button.
At this point you can see the button, but it may look unstyled. To add the styles and correct the coloring, go back to the code editor and add the styles code to the very bottom of the code:
Recruiter Page Button Code
<a class="whatsapp-share-button" href="https://api.whatsapp.com/send?text={{ page.full_url_with_recruiter}}">WhatsApp</a>Recruiter Page Button Styles
<style>
$facebook: #3b5998;
$twitter: #4099ff;
$whatsapp: #25d366;
$theme-colors: map-merge(
(
'facebook': $facebook,
'twitter': $twitter,
'whatsapp': $whatsapp,
),
$theme-colors
);
.whatsapp-share-button {
display: inline-block;
background-image: url('/assets/whatsapp-share-btn.png');
background-repeat: no-repeat;
background-position: center;
background-size: 67px 20px;
width: 67px;
height: 20px;
text-indent: -99999em;
}
</style>
Social Share Prompt
To add the WhatsApp button to your social share prompts, follow these steps:
Login to your control panel and go to the Website tab.
Click on the website that holds your recruiter page you are working on.
Click on the Theme tab.
Click on Current custom theme.
Locate the file called “_flash_share.html” and click on the file name that is hyperlinked.
Now you should be inside of the code editor where you can make your changes to add the WhatsApp button.
Scroll through the code editor until you find a spot where you would like to place the WhatsApp button. If you look for the white text, you can see the names of the other buttons that have been added (such as Facebook and Twitter).
Once you have found a spot to add the button, paste in the button code below.
Click on “Save and publish changes”. This will push the changes live to your website and you will now be able to see the button.
Social Share Prompt Button Code
<a class="btn btn-block btn-whatsapp" href="https://api.whatsapp.com/send?text={{ page.full_url_with_recruiter}}">WhatsApp</a>
In General
If you would like to place the WhatsApp share button in other places around your website, you can use the code below. Keep in mind that this code is just for the button itself and you may have to wrap the button in a div with other styles to position it correctly on your website. If you have any trouble with this, feel free to reach out to our support team at [email protected].
General Button Code
<a class="btn btn-block btn-whatsapp" href="https://api.whatsapp.com/send?text={{ page.full_url_with_recruiter}}">WhatsApp</a>