Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1256625

    hi again,
    essentially what I want to do is place an image (& a link) which sits persistently on the bottom right of the screen. much like those chat bots do, but just a simple image/link.
    i’d be happy for the functionality to be similar to your scroll to the top arrow, in fact if it was able to sit just above that – that would be cool.
    i currently have the image/link in the far right footer widget.
    example
    can you provide any pointers?
    i’m running a child theme so am happy to add code to functions.php etc.
    thanks,
    Jason

    #1257515

    Hey Jason,
    Sorry for the late reply and thanks for the mockup, I couldn’t quite make out your URL, but I thought one way to achieve this would be to copy the “scroll top” button and adjust the link, title, icon and color, like this:
    2020-11-01_213049.jpg
    Try adding this code to the end of your functions.php file in Appearance > Editor:

    function custom_script(){
      ?>
      <script>
    (function($){
         $(document).ready(function() {
      $('#scroll-top-link:first').clone().attr('href', '#3-col-intro').attr('title', 'Chat Bot').attr('id', 'chat-bot').insertAfter($('[id^=scroll-top-link]:last'));
        });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'custom_script');

    in the code above you can change the URL #3-col-intro to your own.
    Then add this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #chat-bot:before {
    content: "\e83c";
    font-family: entypo-fontello;
    color: #fff;
    }
    
    #chat-bot {
    bottom: 150px;
    background-color: yellowgreen;
    position: fixed;
    border-radius: 2px;
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-decoration: none;
    text-align: center;
    right: 50px;
    z-index: 1030;
    }
    

    Please adjust to suit.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    #1257517

    Hi Mike,
    Thanks heaps for your reply, that should work a treat, I’ll give it a shot & report back :)

    #1257609

    Hi,
    Very good, we will leave this open to hear back from you.

    Best regards,
    Mike

    #1257828

    done, works a treat. changed the css slightly to get the image in place:

    #chat-bot:before {
      content: "";
      width: 81px;
      height: 81px;
      background-size: 81px 81px;
      background-image: url(https://domain.com/wp-content/uploads/2020/10/have-your-say.png);
      display: inline-block;
    }

    one thing i’d like to replicate is the fading in on scroll – like with the up arrow.
    i’ll see if i can figure it out & report back – but if you know what to look for, please let me know :)

    #1257992

    Hi,
    As I understand your request, you would like the “chat bot button” to only show after scroll when the “scroll top button” shows.
    So in this case the “scroll top button” shows only when the class “avia_pop_class” is added, so we could watch the “scroll top button” and match classes like this:

    function custom_script(){
      ?>
      <script>
    (function($){
         $(document).one( 'scroll', function() {
      $('#scroll-top-link:first').clone().attr('href', '#3-col-intro').attr('title', 'Chat Bot').attr('id', 'chat-bot').insertAfter($('[id^=scroll-top-link]:last'));
        });
        $(document).scroll(function(){
        if ($('#scroll-top-link:first').hasClass('avia_pop_class')) {
      	$('#chat-bot').addClass('avia_pop_class');
        } else {
        	$('#chat-bot').removeClass('avia_pop_class');
        }
        });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'custom_script');

    To try this script please ensure you remove the previous script first.
    So for your css for this script you will want to include the class “avia_pop_class” like this:

    #chat-bot.avia_pop_class:before {
      content: "" !important;
    }
    #chat-bot.avia_pop_class {
    bottom: 150px;
    width: 81px;
    height: 81px;
    background-size: 81px 81px;
    background-image: url(https://static.wixstatic.com/media/f5aed6_0412643c07754b6f9791bf5d8a92e434~mv2.png/v1/fill/w_361,h_313,al_c,lg_1,q_85/HaveYourSay.webp);
      display: inline-block;
    background-color: transparent;
    position: fixed;
    border-radius: 2px;
    text-decoration: none;
    text-align: center;
    right: 50px;
    z-index: 1030;
    }

    2020-11-03_070007.jpg

    Best regards,
    Mike

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.