Can you help me create something similar to your scroll-top-link arrow?

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:

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

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

Best regards,
Mike

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;
}

Best regards,
Mike