To create a button that can be used for patrons to report issues with accessing e-resources in Primo then the prmFullViewServiceContainerAfter directive can be used.

app.component('prmFullViewServiceContainerAfter', {

   bindings: {parentCtrl: '<'},

               controller: function($scope){

                              var vm = this;

                              var vn = this;

                              vm.targeturl = '';

                              vn.availability = '';

                                                            vn.availability = vn.parentCtrl.item.delivery.displayedAvailability;

                              //check that record is full text

                                             if ((vn.availability === 'not_restricted')||(vn.availability === 'fulltext')){

                                      //get value of full text open url

                                                            vm.targeturl = vm.parentCtrl.item.delivery.link[1].linkURL;

                                                            //vm.targeturl = vm.parentCtrl.item.link.openurlfulltext;

                                                            //trim off first 15 characters in dev env as address is localhost,

                                                            //this might not be necessary to in production

                                                            vm.targeturl = vm.targeturl.substring(15);

                                                            vm.targeturl = 'http://eu.alma.exlibrisgroup.com/vie...'+vm.targeturl;

                                                            vm.targeturl = encodeURIComponent(vm.targeturl);

                                             }

                              },

               template : '<div ng-if="$ctrl.targeturl"><getit-link-service><button class="help-button md-button md-primoExplore-theme md-ink-ripple" type="button" data-ng-click="buttonPressed($event)" aria-label="Report a Problem" aria-hidden="false"><a ng-href="http://www.salford.ac.uk/library/access-to-e-resources/resource-help?referralurl={$ctrl.targeturl}}" target="_blank">Report a Problem</a></button></getit-link-service></div>'

});          

Then to prevent the button displaying in multiple places there’s a piece of CSS which controls where the tag ‘getit-link-service’ (defined in the component template) is displayed :

/*styling for e-resource help button outside iframe */

div > getit-link-service {

   display: none;

}

#getit_link1_0 div > getit-link-service {

   display: inline !important;

}

.help-button {

background-color : #c60c30;

color: #ffffff;

text-transform: capitalize;

}

.help-button a {

color : #ffffff;

text-decoration: none !important;

background-color: transparent !important;

}

.help-button a: hover {

background-color : #c60c30;

text-decoration: none !important;

box-shadow:none !important;

}

See, for example:

https://sal-primo-staging.hosted.exlibrisgroup.com/primo-explore/fulldisplay?docid=44SAL_ALMA_DS2121542130001611&context=L&vid=SAL_MAIN_TEST_ACCESS&lang=en_US&search_scope=LSCOP_SAL&adaptor=Local Search Engine&tab=all&query=any,contains,risk&sortby=rank&offset=0