HI Service Portal (HI Help and Feedback) Floating buttons

[Michael160]

Does anyone know how HI support is doing this on their Service Portal?  These buttons that follow me on their Portal.  I can click on feedback and complete a survey.  I would like to do this on our service portal.

[Michael160]

Stefan; Thank you for such details.   I consider myself a beginner on CSS and portal work.   My only question on your example is where do I define the target to the survey?   My beginner guess is on this line of code - <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Feedback">Feedback</button>.   Specifically target=...   Is that correct?

[stefanpetrovic · Accepted solution]

Michael,

Sorry for a late reply.

You can define it almost anywhere. On a widget level, page, etc

There are two parts that have to have a matching ID. First is on the <button> element and second on a modal (check red highlight)

You chose ID name, but they have to match. If you have more them one modal, you have to have more unique IDs

<!-- Buttons trigger modal -->

<div class="sticky-btn">

      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Feedback">Feedback</button>

      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Help">Help</button>

</div>

<!-- Feedback Modal -->

<div class="modal fade" id="Feedback" tabindex="-1" role="dialog" aria-labelledby="Feedback">

  <div class="modal-dialog" role="document">

      <div class="modal-content">

          <div class="modal-header">

              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

              <h4 class="modal-title" id="myModalLabel">Feedback</h4>

          </div>

          <div class="modal-body">

              ...

          </div>

          <div class="modal-footer">

              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

              <button type="button" class="btn btn-primary">Submit</button>

          </div>

      </div>

  </div>

</div>

Hope this helps

[sreejith_nair12]

Dear Stefan,

Thank you for sharing the code to create the widget for Feedback. Can you also please share some info on how we can create the feedback Star buttons like below.

Thanks,

Sreejith

[lasse3]

Hi Sreejith,

We have just published a free app on the ServiceNow store with this feature.

https://store.servicenow.com/sn_appstore_store.do#!/store/application/b1b464e20fb00300c1098b9ae1050e...

I hope that you will find this useful. Please let me know if you have any input for improvements!

/Lasse

[dannybowers]

Just installed and tested this in our Dev environment and it works perfectly. Will be pushing to our Live environment too.

Cheers

Danny