Various ways. I’d suggest you create a new widget area using this Snippet
You can then add the code from your provider in the standard Text Widget.
Then you’ll need to reposition it. To reposition items, you need to start with:
.selector {
position: relative;
top: 0px;
left: 0%;
}
and then make adjustments. Use ‘-‘ to move up or left from start-position so
top: -1px moves up, 1px moves down
left: -1% moves left, 1% moves right
For width dimensions, using % ensures your responsiveness is maintained.
So you’d need something like:
.home .my-extra-widget {
position: relative;
top: 0px; /* change this vertical */
left: 0%; /* change this horizontal */
}
Thank you!
How would I get the widget area to show inside the nav bar box? What hook do I use instead of __after_header?
The snippet shows only an example for placing it under the header.
Thank you,
Sarah
Because you’re repositioning, then I think that hook should work OK, but you could try __navbar (I’m learning with you!)
Another approach would be through the WP menus and CSS.
Fist of all, you need to understand how to add classes to the menus in WordPress (explained here and reproduced below):
- Go to admin > appearance > menu
- Click on Screen Options (top right of the screen)
- Check the CSS classes options in the “Show advanced menu properties” panel
- add your css classes to the element
Then choose your menu button and give it the classes:
custom-live-chat btn btn-mini btn-primary
You can then style is, as nikeo does here, with something like:
.navbar .nav li.custom-live-chat.btn {
position: relative;
bottom: 6px;
padding: 2px;
line-height: 19px;
vertical-align: middle;
background: url(http://lorempixel.com/120/32/);
}
.navbar .nav li.custom-live-chat.btn a {
color: #FFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.31);
padding: 3px 13px;
}
which will give you your background image.
The only (perhaps big) issue is whether you can then add your code in the menu or not. If your code is a shortcode, then it should work.
The chat provider makes you choose from their buttons or upload your own and the code includes the button you pick from the setup. I don’t think it would work… Although it might, I just don’t have the time to try it out.
My solution: I included the chat code on the site without a button. It just pops up to invite a visitor after 10 seconds. I might just include the button on the contact us page and be done with it.
Thank you both for your help and I might try this out someday… 🙂
Sarah
