<html>
   <head>
      <!-- Load the PushFeedback widget CSS -->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.css">
      <!-- Load the PushFeedback widget script -->
      <script type="module" src="https://cdn.jsdelivr.net/npm/pushfeedback/dist/pushfeedback/pushfeedback.esm.js"></script>
   </head>
   <body>
      <div class="feedback-widget">
         <div class="mb-2">
            <b>Was this helpful?</b>
         </div>
         <span class="feedback-widget-positive">
            <feedback-button project="<PROJECT_ID>" rating="1" button-style="default" modal-position="center">
               <button class="btn btn-outline-primary" title="Yes">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#0070F4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg>
               </button>
            </feedback-button>
         </span>
         <span class="feedback-widget-negative">
            <feedback-button project="<PROJECT_ID>" rating="0" custom-font="True" button-style="default" modal-position="center">
               <button class="btn btn-outline-primary" title="No">
                  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#0070F4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"></path></svg>
               </button>
            </feedback-button>
         </span>
      </div>
   </body>
</html>
.feedback-widget{
  font-family: Arial;
}

.mb-2{
  margin-bottom: 10px;
}

.btn-outline-primary {
  padding: 2px;
  border-radius: 4px;
  border: 2px solid  #0070F4;
  border-color: #0070F4;
  background: #fff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.