How to Add Hello Bar in Your Site or Blog?img.webnots.com/2014/06/Add-Hello-Bar-in-a-Site.pdf ·...
Transcript of How to Add Hello Bar in Your Site or Blog?img.webnots.com/2014/06/Add-Hello-Bar-in-a-Site.pdf ·...
![Page 1: How to Add Hello Bar in Your Site or Blog?img.webnots.com/2014/06/Add-Hello-Bar-in-a-Site.pdf · page of your site . Adjust Bar size, font, link style and border Adjust positioning](https://reader034.fdocuments.net/reader034/viewer/2022051913/60042de2fdc15823095777f1/html5/thumbnails/1.jpg)
How to install Hello Bar in Your Website?
www.webnots.com
![Page 2: How to Add Hello Bar in Your Site or Blog?img.webnots.com/2014/06/Add-Hello-Bar-in-a-Site.pdf · page of your site . Adjust Bar size, font, link style and border Adjust positioning](https://reader034.fdocuments.net/reader034/viewer/2022051913/60042de2fdc15823095777f1/html5/thumbnails/2.jpg)
Open hellobar.com in your browser
Enter Your Site URL
Click on “Create Your First Bar” button
![Page 3: How to Add Hello Bar in Your Site or Blog?img.webnots.com/2014/06/Add-Hello-Bar-in-a-Site.pdf · page of your site . Adjust Bar size, font, link style and border Adjust positioning](https://reader034.fdocuments.net/reader034/viewer/2022051913/60042de2fdc15823095777f1/html5/thumbnails/3.jpg)
Select Your Goal - Drive Traffic or Collect Email.
![Page 4: How to Add Hello Bar in Your Site or Blog?img.webnots.com/2014/06/Add-Hello-Bar-in-a-Site.pdf · page of your site . Adjust Bar size, font, link style and border Adjust positioning](https://reader034.fdocuments.net/reader034/viewer/2022051913/60042de2fdc15823095777f1/html5/thumbnails/4.jpg)
Define URL to open when clicked on the
Hello bar button
![Page 5: How to Add Hello Bar in Your Site or Blog?img.webnots.com/2014/06/Add-Hello-Bar-in-a-Site.pdf · page of your site . Adjust Bar size, font, link style and border Adjust positioning](https://reader034.fdocuments.net/reader034/viewer/2022051913/60042de2fdc15823095777f1/html5/thumbnails/5.jpg)
Add URLs on which Hello bar is to be shown
or not shown
![Page 6: How to Add Hello Bar in Your Site or Blog?img.webnots.com/2014/06/Add-Hello-Bar-in-a-Site.pdf · page of your site . Adjust Bar size, font, link style and border Adjust positioning](https://reader034.fdocuments.net/reader034/viewer/2022051913/60042de2fdc15823095777f1/html5/thumbnails/6.jpg)
Enter bar text
Customize bar color to suit your site layout
Enter button text to be displayed
![Page 7: How to Add Hello Bar in Your Site or Blog?img.webnots.com/2014/06/Add-Hello-Bar-in-a-Site.pdf · page of your site . Adjust Bar size, font, link style and border Adjust positioning](https://reader034.fdocuments.net/reader034/viewer/2022051913/60042de2fdc15823095777f1/html5/thumbnails/7.jpg)
Edit your Goal URL anytime later
![Page 8: How to Add Hello Bar in Your Site or Blog?img.webnots.com/2014/06/Add-Hello-Bar-in-a-Site.pdf · page of your site . Adjust Bar size, font, link style and border Adjust positioning](https://reader034.fdocuments.net/reader034/viewer/2022051913/60042de2fdc15823095777f1/html5/thumbnails/8.jpg)
Instant preview of your Hello bar
Customize look & feel of the bar
Message showing the bar will be displayed on every
page of your site
![Page 9: How to Add Hello Bar in Your Site or Blog?img.webnots.com/2014/06/Add-Hello-Bar-in-a-Site.pdf · page of your site . Adjust Bar size, font, link style and border Adjust positioning](https://reader034.fdocuments.net/reader034/viewer/2022051913/60042de2fdc15823095777f1/html5/thumbnails/9.jpg)
Adjust Bar size, font, link style and border
Adjust positioning of your bar
Open link in new window or same window
![Page 10: How to Add Hello Bar in Your Site or Blog?img.webnots.com/2014/06/Add-Hello-Bar-in-a-Site.pdf · page of your site . Adjust Bar size, font, link style and border Adjust positioning](https://reader034.fdocuments.net/reader034/viewer/2022051913/60042de2fdc15823095777f1/html5/thumbnails/10.jpg)
Fill the form to create your account
![Page 11: How to Add Hello Bar in Your Site or Blog?img.webnots.com/2014/06/Add-Hello-Bar-in-a-Site.pdf · page of your site . Adjust Bar size, font, link style and border Adjust positioning](https://reader034.fdocuments.net/reader034/viewer/2022051913/60042de2fdc15823095777f1/html5/thumbnails/11.jpg)
Choose this option to generate code for all platforms other than
WordPress
![Page 12: How to Add Hello Bar in Your Site or Blog?img.webnots.com/2014/06/Add-Hello-Bar-in-a-Site.pdf · page of your site . Adjust Bar size, font, link style and border Adjust positioning](https://reader034.fdocuments.net/reader034/viewer/2022051913/60042de2fdc15823095777f1/html5/thumbnails/12.jpg)
Copy and paste the code in header section of your
site or page
![Page 13: How to Add Hello Bar in Your Site or Blog?img.webnots.com/2014/06/Add-Hello-Bar-in-a-Site.pdf · page of your site . Adjust Bar size, font, link style and border Adjust positioning](https://reader034.fdocuments.net/reader034/viewer/2022051913/60042de2fdc15823095777f1/html5/thumbnails/13.jpg)
Download and install the plugin for WordPress
![Page 14: How to Add Hello Bar in Your Site or Blog?img.webnots.com/2014/06/Add-Hello-Bar-in-a-Site.pdf · page of your site . Adjust Bar size, font, link style and border Adjust positioning](https://reader034.fdocuments.net/reader034/viewer/2022051913/60042de2fdc15823095777f1/html5/thumbnails/14.jpg)
Create email with your Hello bar code to send to the administrator
of your site.
![Page 15: How to Add Hello Bar in Your Site or Blog?img.webnots.com/2014/06/Add-Hello-Bar-in-a-Site.pdf · page of your site . Adjust Bar size, font, link style and border Adjust positioning](https://reader034.fdocuments.net/reader034/viewer/2022051913/60042de2fdc15823095777f1/html5/thumbnails/15.jpg)
Your Hello bar will start displaying once you
publish your site
![Page 16: How to Add Hello Bar in Your Site or Blog?img.webnots.com/2014/06/Add-Hello-Bar-in-a-Site.pdf · page of your site . Adjust Bar size, font, link style and border Adjust positioning](https://reader034.fdocuments.net/reader034/viewer/2022051913/60042de2fdc15823095777f1/html5/thumbnails/16.jpg)
Analytics of clicks
Login to your account
Creating new bar
![Page 17: How to Add Hello Bar in Your Site or Blog?img.webnots.com/2014/06/Add-Hello-Bar-in-a-Site.pdf · page of your site . Adjust Bar size, font, link style and border Adjust positioning](https://reader034.fdocuments.net/reader034/viewer/2022051913/60042de2fdc15823095777f1/html5/thumbnails/17.jpg)
Pause or Resume the display of bar in your site
Create separate bar for mobile devices
![Page 18: How to Add Hello Bar in Your Site or Blog?img.webnots.com/2014/06/Add-Hello-Bar-in-a-Site.pdf · page of your site . Adjust Bar size, font, link style and border Adjust positioning](https://reader034.fdocuments.net/reader034/viewer/2022051913/60042de2fdc15823095777f1/html5/thumbnails/18.jpg)
Customize Hello bar for mobile devices
![Page 19: How to Add Hello Bar in Your Site or Blog?img.webnots.com/2014/06/Add-Hello-Bar-in-a-Site.pdf · page of your site . Adjust Bar size, font, link style and border Adjust positioning](https://reader034.fdocuments.net/reader034/viewer/2022051913/60042de2fdc15823095777f1/html5/thumbnails/19.jpg)
Add New Site
![Page 20: How to Add Hello Bar in Your Site or Blog?img.webnots.com/2014/06/Add-Hello-Bar-in-a-Site.pdf · page of your site . Adjust Bar size, font, link style and border Adjust positioning](https://reader034.fdocuments.net/reader034/viewer/2022051913/60042de2fdc15823095777f1/html5/thumbnails/20.jpg)
Choose You Goal as “Collect Email”
![Page 21: How to Add Hello Bar in Your Site or Blog?img.webnots.com/2014/06/Add-Hello-Bar-in-a-Site.pdf · page of your site . Adjust Bar size, font, link style and border Adjust positioning](https://reader034.fdocuments.net/reader034/viewer/2022051913/60042de2fdc15823095777f1/html5/thumbnails/21.jpg)
Choose email or email+name option
![Page 22: How to Add Hello Bar in Your Site or Blog?img.webnots.com/2014/06/Add-Hello-Bar-in-a-Site.pdf · page of your site . Adjust Bar size, font, link style and border Adjust positioning](https://reader034.fdocuments.net/reader034/viewer/2022051913/60042de2fdc15823095777f1/html5/thumbnails/22.jpg)
Customize Hello bar for collecting emails
Generate code and add in the header section of your site
![Page 23: How to Add Hello Bar in Your Site or Blog?img.webnots.com/2014/06/Add-Hello-Bar-in-a-Site.pdf · page of your site . Adjust Bar size, font, link style and border Adjust positioning](https://reader034.fdocuments.net/reader034/viewer/2022051913/60042de2fdc15823095777f1/html5/thumbnails/23.jpg)
Click to view subscribers
Sync subscribers with MailChimp, AWeber or
Campaign Monitor
![Page 24: How to Add Hello Bar in Your Site or Blog?img.webnots.com/2014/06/Add-Hello-Bar-in-a-Site.pdf · page of your site . Adjust Bar size, font, link style and border Adjust positioning](https://reader034.fdocuments.net/reader034/viewer/2022051913/60042de2fdc15823095777f1/html5/thumbnails/24.jpg)
Choose option to sync your collected emails, for
example MailChimp
![Page 25: How to Add Hello Bar in Your Site or Blog?img.webnots.com/2014/06/Add-Hello-Bar-in-a-Site.pdf · page of your site . Adjust Bar size, font, link style and border Adjust positioning](https://reader034.fdocuments.net/reader034/viewer/2022051913/60042de2fdc15823095777f1/html5/thumbnails/25.jpg)
Login to MailChimp account to authorize connecting
Hello bar account
![Page 26: How to Add Hello Bar in Your Site or Blog?img.webnots.com/2014/06/Add-Hello-Bar-in-a-Site.pdf · page of your site . Adjust Bar size, font, link style and border Adjust positioning](https://reader034.fdocuments.net/reader034/viewer/2022051913/60042de2fdc15823095777f1/html5/thumbnails/26.jpg)
Choose email or email+name option
Click on your email id and then cancel my account
Cancel or Update Account
Change email or password
![Page 27: How to Add Hello Bar in Your Site or Blog?img.webnots.com/2014/06/Add-Hello-Bar-in-a-Site.pdf · page of your site . Adjust Bar size, font, link style and border Adjust positioning](https://reader034.fdocuments.net/reader034/viewer/2022051913/60042de2fdc15823095777f1/html5/thumbnails/27.jpg)
www.webnots.com