[Resolved] Adding a click to call icon in mobile mode

[Duncan]

Hello there

I’m looking for some assistance.

I’m trying to add a green click to call phone icon on my website, which will only display on mobile mode, something similar to the one on this website: https://www.ksplumbingheating.co.uk/ (it’s only visible om mobile mode too.)

I’m afraid I’m not technical when it comes to things like this, so I’d appreciate some simple to follow steps to achieve this.

Any assistance is much appreciated.

Thanks in advance

[Tom]

Hi there,

You could:

1. Create a Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
2. Set the hook to generate_after_footer
3. Add this as your hook content:

<a href="tel:12345677889" id="callnowbutton"><span class="screen-reader-text">Call Now Button</span></a>

Be sure to update the phone number.

4. Set your Display Rules.

Then, you can add this CSS:

@media screen and (max-width: 650px) {
    #callnowbutton {
        display: block;
        position: fixed;
        text-decoration: none;
        z-index: 2147483647;
        width: 65px;
        height: 65px;
        border-radius: 50%;
        border-top: 1px solid #2dc62d;
        bottom: 15px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
        transform: scale(1);
        right: 20px;
        background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNjAgNjAiPjxwYXRoIGQ9Ik03LjEwNCAxNC4wMzJsMTUuNTg2IDEuOTg0YzAgMC0wLjAxOSAwLjUgMCAwLjk1M2MwLjAyOSAwLjc1Ni0wLjI2IDEuNTM0LTAuODA5IDIuMSBsLTQuNzQgNC43NDJjMi4zNjEgMy4zIDE2LjUgMTcuNCAxOS44IDE5LjhsMTYuODEzIDEuMTQxYzAgMCAwIDAuNCAwIDEuMSBjLTAuMDAyIDAuNDc5LTAuMTc2IDAuOTUzLTAuNTQ5IDEuMzI3bC02LjUwNCA2LjUwNWMwIDAtMTEuMjYxIDAuOTg4LTI1LjkyNS0xMy42NzRDNi4xMTcgMjUuMyA3LjEgMTQgNy4xIDE0IiBmaWxsPSIjMDA2NzAwIi8+PHBhdGggZD0iTTcuMTA0IDEzLjAzMmw2LjUwNC02LjUwNWMwLjg5Ni0wLjg5NSAyLjMzNC0wLjY3OCAzLjEgMC4zNWw1LjU2MyA3LjggYzAuNzM4IDEgMC41IDIuNTMxLTAuMzYgMy40MjZsLTQuNzQgNC43NDJjMi4zNjEgMy4zIDUuMyA2LjkgOS4xIDEwLjY5OWMzLjg0MiAzLjggNy40IDYuNyAxMC43IDkuMSBsNC43NC00Ljc0MmMwLjg5Ny0wLjg5NSAyLjQ3MS0xLjAyNiAzLjQ5OC0wLjI4OWw3LjY0NiA1LjQ1NWMxLjAyNSAwLjcgMS4zIDIuMiAwLjQgMy4xMDVsLTYuNTA0IDYuNSBjMCAwLTExLjI2MiAwLjk4OC0yNS45MjUtMTMuNjc0QzYuMTE3IDI0LjMgNy4xIDEzIDcuMSAxMyIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==) center/50px 50px no-repeat #009900;
    }
}

That data string is the image they’re using. You can remove it and add your own SVG/image into the HTML if you’d like.

Hope this helps!

[Duncan]

Hi Tom

Thanks for your reply.

I’ve followed your instructions, however the click to call phone icon isn’t displaying, don’t know if I’ve missed something?

When I created the hook it didn’t give me the option to set it to ‘generate_after_footer’ as you suggested, I therefore set it to ‘after_footer.

Hopefully you can point me in the right direction.

Thanks
Duncan

[Duncan]

Hi Tom

Managed to fix it, I did this by changing the hook setting to “after_footer-content”.

Thanks
Duncan

[Tom]

Glad you got it working! 🙂

[Author]

Posts