In this tutorial, we’re going to be building a simple opt-in overlay using a template from our Overlay category in OptimizeLeads, which we’ll then edit and customise. By the end of this tutorial, you will have a general overview of how the OptimizeLeads tools work and a solid foundation to build on moving forward.
– To begin, let’s start off by clicking on the ‘Create New Opt-In‘ link on the top menu bar. Next, scroll through the list of opt-in designs until you see the opt-in style called ‘Download‘. Click the green ‘Use This Design‘ button to make your selection.
– Once clicked, an overlay box will appear, prompting you to select the panel type of the opt-in box. This allows you to choose how you would like your opt-in box to be displayed on the page. For this tutorial, we will leave this default to ‘Main Panel‘. Click the blue ‘Create My Optin‘ button to confirm the selection.
– You will be taken to the main opt-in box editing window to begin editing and customising. The first thing you will be prompted to do is to select your autoresponder:
PLEASE NOTE: If you have yet to integrate with an email provider, please ensure you do this first by referring to the Integrations section in OptimizeLeads.
– Once your email provider has been selected, you will be given the option to select the email list/form you will have set in your email provider service, assign tags if you have them assigned, assigned forms and whether you would like to add your subscribers to ‘GotoWebinar‘. This option is mainly used if you would like your visitors to be placed in a webinar service if you’re promoting a scheduled webinar.
– You can edit these settings by clicking on the ‘Integration Settings‘ selection on the main editing window.
– Once you’ve made your selections, click the blue ‘Save’ button to confirm the changes. You will be taken to the main editing window to begin editing your optin box.
– The white vertical bar on the left of the editing area represents each of the elements you can edit on your opt-in box. Clicking on them will expand the options for that element to begin making changes.
– Any changes made will display live in the box to get a visual idea of how it will look prior to saving and confirming the changes. Again, you can always go back and make future edits at a later date.
– You can also click on any of the elements you would like to edit by clicking on an element on the opt-in box itself. This will expand the editing options for that element.
The first thing we’re going to begin editing is the percentage bar:
– To edit this, click on the ‘Progress Bar‘ selection under the ‘Content Styling‘ section. You will be given a range of editing options to change and customise to your liking.- For this tutorial, we’re going to round the corners of the progress bar. To do this, head to the section called ‘Border Radius‘, then click on the slider and scroll to the right until the slider reaches ‘8px‘. This will round the corners of the progress bar.
– Next, we’re going to change the colour. Head to the ‘Percentage Colour‘ section and add in the following colour code: #37a7bf
– Click on the text area under ‘Percentage Text‘ and type in the following: 50% Complete – 50% To Go
– Change the ‘Text Colour‘ to the following: #785f5f
The progress bar should now look like this:
– Next, We’ll change the main headline of the opt-in box:
– Click on the ‘Headline Text‘ option under the ‘Content Styling‘ options.
– Under the ‘Text‘ area, type in the following headline: DO YOU HAVE THE CODE? DOWNLOAD THE EBOOK NOW!
With the changes made, your opt-in box should now look like this:
– Lastly, we’re going to change the styling of the optin box submit button:
– To do this, head on over to the ‘Submit Button‘ selection under the ‘Content styling‘ options.
– Set the ‘Background Colour‘ to: #00c2ff
– Set the ‘Border Colour‘ to: #000000
– Set the ‘Border Width‘ to: 1px
Save the changes. You should now have an opt-in box that looks like this:
– For your opt-in box, we’re going to want to set a redirection URL or a page that you would like your visitors to be sent to after they’ve opted into your form. To do this.
– Head to the ‘Redirect‘ option. You will be taken to an area to enter in the page URL of the page you would
like to use. Enter in your page URL and save the changes.
– Once you’re happy with the changes made to your opt-in box, click on the ‘Publish‘ button on the top right of the editing window.- The ‘Publishing Options‘ overlay box will appear, prompting you to set how you would like your opt-in box to be displayed.
– For this example, we’re going to change the ‘Link Text‘ of the publishing setting, making sure that the ‘Link‘ option is selected. This will create a text link, which will allow a visitor to click on and display the opt-in box on their page.
– Type in the following text: CLICK ME TO SEE POPUP
– Finally, we will want to grab the embed code of your opt-in box so we can paste this in on your page. You will have 3 embed options to select from. For this tutorial, we will select the ‘HTML‘ option. Click on the ‘Copy‘ button icon to copy the embed code to the clipboard.
– Head on over to your page (Making sure you’re in HTML view) and paste in the code.
– Save the changes. Your opt-in box is now live on your page and ready to begin collecting leads.