This floating button / widget / bubble will allow users to send an SMS to you through their native application (on a phone it will open up the SMS app, on a Mac it will open up messages).

Example:

Just copy the code below and paste it into the <body> of your website.

You can customize it by editing the phone number and the body under the section "Edit your message here"

<link href="https://fonts.googleapis.com/css?family=Hind:700" rel="stylesheet"> 

<!-- EDIT YOUR MESSAGE HERE-->
<a id="send-sms" class="ba-we-love-subscribers-wrap" href="sms:+18556743554&body=hi">

<div class="send-sms-msg"> Questions? Text Us! </div> <div class="ba-we-love-subscribers-fab"> <div class="wrap"> <div class="img-fab img"> </div> </div> </div> </a> <style> @import url('https://fonts.googleapis.com/css?family=Roboto'); .ba-we-love-subscribers-fab { width: 65px; height: 65px; background-color: #093A3E; border-radius: 30px; float: right; box-shadow: 0px 12px 45px rgba(0, 0, 0, .3); z-index: 5; position: relative; } .ba-we-love-subscribers-fab .img-fab { height: 40px; width: 40px; margin: 15px auto; background-image: url("data:image/svg+xml,%3Csvg width='40' height='32' viewBox='0 0 40 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_141_12)'%3E%3Cpath d='M27.7231 28.3089C25.9142 28.915 21.0434 29.5724 19.185 29.7247C17.5275 29.8755 15.7695 30.0278 14.0115 29.8755C11.7515 29.6734 9.49142 29.016 7.28234 27.9561C4.97134 26.8448 3.36474 25.4803 2.30965 23.9137C1.20511 22.1963 0.653585 19.9226 0.703046 17.1423C0.703046 16.7382 0.703046 16.3853 0.703046 15.9813C0.703046 14.0603 0.703046 12.0897 1.20511 10.2215C2.51048 5.42076 4.56969 4.41055 6.1778 3.60238C8.08564 2.64192 11.9028 1.47942 14.0625 1.22762C17.6279 0.772271 21.6459 1.07534 25.4631 1.47942C28.5264 1.78248 31.2885 2.7927 33.8498 4.51157C38.5707 7.6945 38.872 10.2713 39.0728 11.9887C39.1237 12.242 39.1237 12.4953 39.1732 12.6973C39.6258 14.971 38.8225 18.7601 37.8678 21.1349C37.3658 22.4481 36.462 24.2168 34.8045 24.6721L34.6037 24.7219C34.3519 24.7731 34.0506 24.8742 34.0012 24.9752C33.9502 25.0249 34.0012 25.1772 34.202 25.53C35.4564 27.3997 37.0645 28.713 38.8719 29.4216C39.0233 29.4714 39.1732 29.6734 39.1732 29.8257C39.1732 30.0278 39.0728 30.1785 38.8719 30.2298C37.5156 30.6836 36.1098 30.9369 34.7535 30.9369C32.0424 30.9369 29.5305 30.0278 27.7231 28.3089ZM33.5486 26.0352C33.2968 25.6823 33.0465 25.1772 33.2473 24.6721C33.4482 24.1157 34.0506 23.9635 34.4523 23.8624L34.6037 23.8127C35.909 23.4584 36.6629 21.943 37.0645 20.7805C37.9682 18.5068 38.7221 14.9198 38.3204 12.7983C38.2695 12.545 38.2695 12.2917 38.2185 12.0399C38.0177 10.3723 37.7674 8.14985 33.3972 5.21872C30.9363 3.55111 28.3256 2.64192 25.4121 2.33886C21.6459 1.93477 17.7283 1.68146 14.2123 2.08555C12.1531 2.33886 8.38688 3.45009 6.62891 4.35928C5.07176 5.16745 3.26432 6.02689 2.10883 10.4236C1.60676 12.1907 1.60676 14.1116 1.60676 15.93C1.60676 16.3341 1.60676 16.6884 1.60676 17.0925C1.5573 19.6693 2.05937 21.7907 3.0635 23.3573C4.01817 24.8229 5.52436 26.0351 7.68399 27.0966C9.84359 28.1581 12.0033 28.7642 14.1119 28.9663C15.8204 29.1186 17.5275 28.9663 19.1341 28.814C21.2937 28.6119 26.3158 27.9048 27.6722 27.3499C27.8235 27.2987 28.0244 27.3499 28.1248 27.451C30.3339 29.6734 33.9502 30.5329 37.5156 29.6734C36.0094 28.915 34.6531 27.653 33.5486 26.0352Z' stroke='white' stroke-width='0.983535' stroke-miterlimit='10'/%3E%3Cpath d='M11.6511 10.7764C10.5465 10.7267 9.39101 10.6754 8.23701 10.7267C7.98523 10.7267 7.7844 10.5246 7.7844 10.2713C7.7844 10.018 7.98523 9.81596 8.23701 9.81596C9.44196 9.7662 10.5975 9.81596 11.702 9.86722C12.8066 9.91698 13.9111 9.96824 15.1176 9.91698C15.7695 9.91698 16.4229 9.86722 17.0764 9.71494C17.3266 9.66518 17.5275 9.56416 17.7792 9.51289C18.1299 9.41187 18.5316 9.26109 18.9332 9.20983C19.5867 9.10881 20.1892 9.20983 20.7916 9.26109C21.1933 9.31085 21.5949 9.36212 21.9981 9.36212C22.6006 9.36212 23.203 9.20983 23.855 9.05905C24.3585 8.95803 24.8606 8.80574 25.4121 8.75599C27.1701 8.6037 28.8277 9.16007 30.3339 9.66518C30.5856 9.7662 30.6861 9.96824 30.6351 10.2216C30.5347 10.4733 30.3339 10.5744 30.0836 10.5246C28.6763 10.0693 27.0697 9.51289 25.5125 9.66518C25.0105 9.71494 24.5594 9.81596 24.0558 9.91698C23.4039 10.0693 22.7504 10.2216 22.0475 10.2216C21.5949 10.2216 21.1438 10.1703 20.7422 10.1205C20.1892 10.0693 19.6376 9.96824 19.1341 10.0693C18.7834 10.1205 18.4821 10.2216 18.1299 10.3226C17.8797 10.4236 17.6279 10.4734 17.3776 10.5246C16.6732 10.6754 15.9209 10.7267 15.218 10.7267C14.9167 10.7267 14.6649 10.7267 14.3637 10.7267C13.3596 10.8277 12.5053 10.8277 11.6511 10.7764Z' stroke='white' stroke-width='0.983535' stroke-miterlimit='10'/%3E%3Cpath d='M9.89309 15.2742C9.6428 15.2742 9.49143 15.0208 9.49143 14.8188C9.49143 14.5655 9.74319 14.4147 9.94409 14.4147C11.9523 14.5655 14.0625 14.5157 16.0707 14.4147C17.2262 14.3635 18.4312 14.3137 19.5867 14.3137C19.6376 14.3137 19.7381 14.3137 19.7875 14.3137C20.8921 14.3137 22.0476 14.2127 23.1521 14.1117C25.4631 13.9096 27.8235 13.6563 30.0836 14.3635C30.3339 14.4147 30.4343 14.6665 30.3848 14.9198C30.3339 15.1731 30.0836 15.2742 29.8318 15.2229C27.7231 14.5655 25.5635 14.7675 23.203 15.0208C22.0476 15.1219 20.8921 15.2229 19.6871 15.2229C18.4821 15.2229 17.2262 15.2742 16.0707 15.3239C14.9167 15.3752 13.7612 15.4249 12.5563 15.4249C11.6511 15.3752 10.7474 15.3239 9.89309 15.2742Z' stroke='white' stroke-width='0.983535' stroke-miterlimit='10'/%3E%3Cpath d='M19.0846 19.0632C19.0846 18.8098 19.2855 18.6078 19.5373 18.6078L29.8828 18.558C30.1331 18.558 30.3339 18.7601 30.3339 19.0119C30.3339 19.2652 30.1331 19.4672 29.8828 19.4672L19.5373 19.517C19.2855 19.517 19.0846 19.315 19.0846 19.0632Z' stroke='white' stroke-width='0.983535' stroke-miterlimit='10'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_141_12'%3E%3Crect width='40' height='32' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E"); background-repeat: no-repeat; } .ba-we-love-subscribers-fab .wrap { transform: rotate(0deg); -webkit-transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23); transition: all .15s cubic-bezier(0.15, 0.87, 0.45, 1.23); cursor: pointer; } .ba-we-love-subscribers-wrap { position: fixed; right: 25px; bottom: 25px; z-index: 1000; text-decoration: none; } #send-sms:hover { text-decoration: none; } #send-sms:link { text-decoration: none; } #send-sms:visited { text-decoration: none; } #send-sms:active { text-decoration: none; } #send-sms:focus { text-decoration: none; } .send-sms-msg { font-family: 'roboto'; width: 'fit-content'; height: 100%; padding: 10px; background-color: #093A3E; color: #FFFFFF; border-radius: 20px; margin-bottom: 8px; text-align: right; line-height: 1.5; text-decoration: none !important; } </style>

Did this answer your question?