[Resolved] Nav Button Launch Pop-Up

Home Forums Support Nav Button Launch Pop-Up

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1480815
    Joe

    Hi there!

    I have a “book demo” link in my primary navigation sitewide. Right now it links out to a new page and I want to update it to launch a lightbox where a user can fill out the scheduling flow without leaving the page.

    My site built with the Elementor plugin. I was able to get the button working outside of the nav by setting up a pop-up template that launches on click. You can see it in the homepage hero CTA “Book Demo” on https://www.statecraftsims.com/

    I’m not sure how to set this up in the nav, though. I believe there are two strategies here: (1) it can launch the pop-up template I built in elementor OR (2) we could update the button code to use the button provided by ScheduleOnce. I already have the button custom-coded for the look:


    @media
    (min-width:769px) {
    .main-navigation .main-nav ul li.demo
    a {
    font-size: 15px;
    background-color: #F9E070;
    border: 2px solid #F9E070;
    border-radius: 5px;
    color: #1B3267;
    line-height: 30px;
    }
    .main-navigation .main-nav ul li.login a:hover {
    background-color: #DEE8F1;
    }
    .main-navigation .main-nav ul li.login a:active {
    background-color: #4B84B2;
    }
    }

    The pop-up ID is [elementor-template id=”3786″]

    If we wanted to try and use the button code from ScheduleOnce it’s:
    <!– ScheduleOnce embed START –>

    <script type=”text/javascript” src=”https://cdn.oncehub.com/mergedjs/so.js”></script&gt;
    <!– ScheduleOnce embed END –>

    #1481084
    Leo
    Staff
    Customer Support

    Hi there,

    Would adding it through the generate_inside_navigation hook in a hook element work for you?
    https://docs.generatepress.com/article/hooks-element-overview/

    #1490237
    Joe

    Hi again, I’m back to trying to figure this out!

    I have no idea if that generate nav hook would work. I read the hook documentation and can see where they are in the interface. I used hooks to add the google analytics script, for example.

    How do you suggest I program the button that already exists in my nav to launch a pop-up using the hook?

    My apologies, I’m not a developer so I really struggle with the coding component of my web work (but I’m trying!).

    #1490782
    Leo
    Staff
    Customer Support

    Can you add the code from ScheduleOnce inside the hook and see if that works?

    #1491787
    Joe

    Got it! So the button looks good, I was able to update it to match the one I currently have on the site, and it’s launching the ScheduleOnce flow, which is great.

    I’m not sure how to get it to live where I want it to, though. I want it to be on the right side of the nav. It’s auto-populating to the left.

    You can see the current button and navigation on the live site here at https://www.statecraftsims.com/

    Right now I’ve got both on staging, here’s the link and I’ll drop credentials below.
    https://wordpress-373625-1319278.cloudwaysapps.com/

    For reference, this is the code I have in the hook:
    <!– ScheduleOnce button START –>
    <button
    id=”SOIBTN_Statecraft-Demo”
    style=”
    background: #F9E070; color: #1B3267; padding: 6px 15px; border-radius: 5px; font: 15px; letter-spacing: 2px; cursor: pointer;”
    data-height=”580″
    data-psz=”00″
    data-so-page=”Statecraft-Demo”
    data-delay=”1″>BOOK DEMO</button>
    <script type=”text/javascript” src=”https://cdn.oncehub.com/mergedjs/so.js”></script&gt;
    <!– ScheduleOnce button END –>

    #1492324
    Leo
    Staff
    Customer Support

    Hmm it would be a lot easier if you are using the Flex version of GP.

    Any chance you can give that a shot first?

    The setting is under Customizer > General.

    #1495395
    Joe

    Hi, I looked and it appears this will change the layout of my ENTIRE site. I use Elementor and have all of my box-width settings in there. I’m in the middle of some major updates and doing this is too risky. I’ll give it a try on staging once I’m able to release my current dev work, hopefully in the next day or two.

    #1495883
    Leo
    Staff
    Customer Support
    #1516478
    Joe

    Hi Leo! Ok, I was finally able to update to the flex version of GP. I ended up with a few odd borders around boxes but it’s something I can fix pretty easily so I’m willing to work with that tiny bug if we can get the menu button working the way I’m hoping.

    Now that I have the flex version running, how can I program that menu button? I see it hanging out on the left side of the other main nav menu options now… I just want to get it to the right to replace the current RH button.

    #1516560
    Leo
    Staff
    Customer Support

    Sorry it’s been awhile so I need to refresh my memory a bit.

    Can you link me to the page in question again?

    #1516774
    Joe

    It’s the whole site. I’m trying to replace the nav button I have in the top primary nav with one that prompt a lightbox scheduling widget from ScheduleOnce.

    Here’s my staging, will add credentials in the private section. http://wordpress-373625-1319278.cloudwaysapps.com/

    You’ll see that on the RH side there’s a button, which is what I want eventually (demoed as the final desired result on the live site https://www.statecraftsims.com/)! I made that one with the regular navigation theme settings. This one looks good but opens the scheduler in a new window instead of the desired lightbox

    I made the one via the generate_inside_navigation hook that’s appearing on the LH side of the other menu options. Just trying to figure out how to move it over to the right. You said that running the flex version of the site would make this easier?

    Hopefully that was a helpful catch-up! Let me know if I can offer more info for additional clarity.

    #1517029
    Leo
    Staff
    Customer Support

    I think this hook should help:
    https://docs.generatepress.com/article/generate_menu_bar_items/

    The video shows how it works.

    Can you take a look and let me know?

    #1517811
    Joe

    Hi Leo, So the only difference with that video seems to be the type of hook. The video is generate_menu_bar_items and I had originally used generate_inside_navigation. I changed to the menu bar item option and it looks exactly the same; from my viewpoint there doesn’t seem to be a difference between the two hooks. Is there a reason one is preferable vs. the other?

    It’s still located on the LH side of the menu items, there was nothing in the video that helped with the challenge of moving the location of that button to the right. That’s all I need help with here. Thanks!

    #1518050
    Leo
    Staff
    Customer Support

    Can you clear and disable your caching plugin first?

    Using the generate_menu_bar_items would make the content show up beside the menu toggle you have right now.

    And currently, I’m not seeing anything added in it other than the default toggle:
    https://www.screencast.com/t/gF0jDSjU6u

    #1525776
    Joe

    Ok, this is finally working, thank goodness! I appreciate all of your help!

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.