How to add EngageBay form to header in homepage?

This page explains about - "How to add EngageBay form to header in homepage in Siteoly?"

This feature is available only in paid plans.

If you haven't heard about EngageBay, check about EngageBay here. EngageBay is a robust platform to capture emails and increase sales to help founders market better and sell faster.

Follow below guide from EngageBay to create inline form in EngageBay dashboard.

Guide to create EngageBay Forms

Once your form creation is done, you should have your form code as below. (Your Account number and Form Ids could be different. Below code is only a sample)

<script type="text/javascript" >
    var EhAPI = EhAPI || {}; EhAPI.after_load = function(){
    EhAPI.set_account('ni0a4qp5d7q9pg6fnvhpgce090', 'gmailzjct');
    EhAPI.execute('rules');};(function(d,s,f) {
    var sc=document.createElement(s);sc.type='text/javascript';
    sc.async=true;sc.src=f;var m=document.getElementsByTagName(s)[0];
    m.parentNode.insertBefore(sc,m);   
    })(document, 'script', '//d2p078bqz5urf7.cloudfront.net/jsapi/ehform.js');
</script> 

<div class="engage-hub-form-embed" id="eh_form_6015895869587456" data-id="6015895869587456"> </div>

Note: After you get the above code, make sure it works by using it on JS.DO and testing.

Follow below steps to add this embed code in Siteoly and display form in the home page header in Siteoly

1. Goto the 'Header' sheet in the Google sheet connected to your site.

2. Now that you want to display EngageBay form, disable the default MailChimp form by setting Display to 'No' in row 13 under 'Email Subscription'

3. Goto Row 26 and see for Header 'Content'

4. Below 'Header Content' (Row 26), you can add the required forms by adding new row as below.

5. Select Column A as 'Text' , Column B as 'h6' (you can select any other size as well based on what fits for you) and in Column D - add the embed code from EngageBay

Now use the "live test" url to pull the changes from Google sheet and see the newly added form on home page.

Hint: You can also play around with Header Design by selecting designs from Row 10 dropdown.

Below are some sample screens with EngageBay form added to the Header for various Header Designs.

If you need to add more css/javascript, it is possible with Siteoly by adding required CSS/Javascript for any element on the page. If you need some quick help, please reach out to support.