Skip to Content
Technical Articles
Author's profile photo Mohammed Aymen

Qualtrics Website & App Feedback Integration with Fiori Launchpad: S/4 HANA On-Premise & BTP


Website/App Feedback projects are a creative way to gain feedback on your website or mobile app. They use intercepts & creatives to achieve this. These graphics can be displayed in your website or app as overlays, feedback buttons, pop-ups etc. In this blog post we will focus on how to integrate this intercept into our S/4 system, be it on-premise or cloud.



  1. A Qualtrics account with authorization to create Website/App feedback
  2. A survey & website/App feedback
  3. WebIDE to create Fiori Plugin
  4. S/4 System (for On-premise integration)
  5. SCP Portal Service Access (To demonstrate Cloud Integration)

For the first two prerequisites, we already have support documents provided by Qualtrics. I will drop the links below:

Survey Creation –

Website/App Feedback –


Now that the survey & the Website Feedback is ready, I will start with the next steps.


Login to your SCP Cockpit, select your sub-account & Start WebIDE.

Now create a new project from template, and select ‘SAP Fiori Launchpad Plugin’.


Fiori Plugin Project

In case you are not able to see this template, go to tools->preferences. Select Extensions from the left hand side pane, and turn on Fiori Launchpad Extensibility.




Next, create the project. Provide the Project name, Plugin ID & title. And click on finish. Your Fiori Launchpad Plugin is created.

Next we need to call the Qualtrics Feedback created, in this plugin application.

Now go to the component.js file in the plugin application. Call the below line of code inside init function.



Now copy the below piece of code for the above method created to trigger the intercept.

embedWebsiteFeedbackStarter: function () {
			/* eslint-disable */

			var g = function (e, h, f, g) {
				this.get = function (a) {
					for (var a = a + "=", c = document.cookie.split(";"), b = 0, e = c.length; b < e; b++) {
						for (var d = c[b];
							" " == d.charAt(0);) d = d.substring(1, d.length);
						if (0 == d.indexOf(a)) return d.substring(a.length, d.length)
					return null
				this.set = function (a, c) {
					var b = "",
						b = new Date;
					b.setTime(b.getTime() + 6048E5);
					b = "; expires=" + b.toGMTString();
					document.cookie = a + "=" + c + b + "; path=/; "
				this.check = function () {
					var a = this.get(f);
					if (a) a = a.split(":");
					else if (100 != e) "v" == h && (e = Math.random() >= e / 100 ? 0 : 100), a = [h, e, 0], this.set(f, a.join(":"));
					else return !0;
					var c = a[1];
					if (100 == c) return !0;
					switch (a[0]) {
					case "v":
						return !1;
					case "r":
						return c = a[2] % Math.floor(100 / c), a[2]++, this.set(f, a.join(":")), !c
					return !0
				this.go = function () {
					if (this.check()) {
						var a = document.createElement("script");
						a.type = "text/javascript";
						a.src = g;
						document.body && document.body.appendChild(a)
				this.start = function () {
					var t = this;
					"complete" !== document.readyState ? window.addEventListener ? window.addEventListener("load", function () {
					}, !1) : window.attachEvent && window.attachEvent("onload", function () {
					}) : t.go()
			try {
				(new g(100, "r", "QSI_S_ZN_6sO4Br3Spbt61a5",
			} catch (i) {}

			/* eslint-enable */


You can also get this code from your website app created in Qualtrics. If you copy the above code, you need to change the intercept URL & ID.

try {
				(new g(100, "r", "QSI_S_ZN_6sO4Br3Spbt61a5",
			} catch (i) {}


To get it from Qualtrics, go to settings & click on deployment, in your feedback created.



Website Feedback


Code Snippet from Qualtrics


Now your Fiori Plugin is ready. Save it & run. You will be able to see the feedback button at the corner of the screen. Click & it expands with your survey questions.


Feedback Button

Next, deploy this application to SAPUI5 ABAP Repository. Select the system, and then deploy.

Once Deployed, it will be available in the gateway system.


Go to customizing page of your Fiori Launchpad in the S/4 system or use tcode /UI2/FLPD_CUST.


Create a custom catalog. Next, click on target mapping, and select create target mapping.


Target Mapping for Catalog


Fill in the details as given in the below screenshot.


Configure Target Mapping

You can get your URL from tcode SICF & your ID will be available in manifest.json file in your Fiori Plugin app in WebIDE. Rest of the details remain the same.

Now save the mapping. Go to your gateway system backend & create a role. Assign the catalog to the role and set the role to the user. Now you are all set.

Login to your Fiori Launchpad using the user you assigned the role to. Voila, there you have your intercept. Now respond to the survey & submit. Go to Qualtrics & check if your response is updated. That completes our Qualtrics Integration with S/4 On-Prem system.


Next, to integrate into SCP Fiori Launchpad, we will make use of the portal service in your SCP Cockpit. But first, deploy your Fiori Plugin App in WebIDE into SAP Cloud Platform.


Once done, select services on the left hand pane of your SCP Sub-account, choose Portal service & click on go to service.


Portal Service


Create a new site. Choose the Fiori Launchpad Template.


Portal Template

Once the site is created, go to Apps on the left hand pane under content management. Click on ‘+’ button to add a new app.

Select the App type as Shell Plugin. Select the app you deployed to SAP cloud platform in App resources. In the catalog tab, select sample catalog. And save.


App type


Your Website Feedback is now ready in SCP Launchpad. Next click on the publish site icon(looks like globe) & click on publish and open. Your SCP Launchpad will open with the feedback button for survey in it.


Tip: We can also integrate this App feedback into websites. All you need to do is copy the code from deployment in Qualtrics & put it in your website’s html page within the body tag (Eg; index.html).


In this blog post, I have shown steps to integrate a Simple Qualtrics Intercept with feedback button onto S/4 On-Prem & Cloud Fiori Launchpad. There are multiple options such as banners, overlays, sliders, pop-up etc. Feel free to try them.


Thank you. 🙂

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Ashok Kumar M
      Ashok Kumar M

      Nice blog Mohammed Aymen

      Author's profile photo Mohammed Aymen
      Mohammed Aymen
      Blog Post Author

      Thanks Ashok .

      Author's profile photo Waldemar Koch
      Waldemar Koch

      Thank you.

      Now we need the integration in SAP Conversational AI and the Central Fiori Launchpad 😉

      We need also SAP Qualtrics as a service in the SAP Cloud Platform 😉

      Author's profile photo Mohammed Aymen
      Mohammed Aymen
      Blog Post Author

      I am working on the blog post for CAI integration with on-premise & SCP Launchpad for Qualtrics. Will publish soon. 🙂


      Author's profile photo Anca Milos
      Anca Milos

      Hello @Mohammed Aymen 🙂

      Great blog! thanks for sharing 🤩

      I have a question: do you have any idea if the  "SAP Fiori Launchpad Plugin’." was removed from web ide?

      I tried to enable it but is not on the list.

      And in the creation dialog also is missing

      Author's profile photo Mohammed Aymen
      Mohammed Aymen
      Blog Post Author

      Hello Anca,


      I am still able to see the plugin in my Extensions.


      Also check your cockpit version. I have attached mine below.

      Author's profile photo Anca Milos
      Anca Milos

      Also do you have any idea if this  option ti develop a fiori plugin is available in BAS?
      Thnak youu 🙂

      Author's profile photo Mohammed Aymen
      Mohammed Aymen
      Blog Post Author

      No. BAS does not have plugin option. We have to create SAP Fiori freestyle project & then do modify init() method as well as manifest file to make it a plugin..

      There should be recent blogs available on this. If not, I will try to publish one soon.

      Author's profile photo Amit Upadhye
      Amit Upadhye

      @ayaymensk001 Could you please publish a blog with BAS?. Webide free accounts are discountined.