Clipboard

How to use?

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

            
              <script src="../../assets/vendor/clipboard/dist/clipboard.min.js"></script>
            
          

Copy-paste the following <script> near the end of your pages under JS Front to enable it.

            
              <script src="../../assets/js/components/hs.clipboard.js"></script>
            
          

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

            
              <script>
                $(document).on('ready', function () {
                  // initialization of clipboard
                  $.HSCore.components.HSClipboard.init('.js-clipboard');
                });
              </script>
            
          

Basic example

                  
                    <div class="js-focus-state input-group mb-2">
                      <input id="referralLink" type="text" class="form-control" value="https://themes.getbootstrap.com/product/front-multipurpose-responsive-template/">
                      <div class="input-group-append">
                        <a class="js-clipboard input-group-text" href="javascript:;"
                           data-content-target="#referralLink"
                           data-class-change-target="#linkIcon"
                           data-default-class="fas fa-clone"
                           data-success-class="fas fa-check">
                          <span id="linkIcon" class="fas fa-clone"></span>
                        </a>
                      </div>
                    </div>
                  
                

JavaScript behavior

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-controls="".