Skip to Content
Technical Articles

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

Introduction

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.

Solution

Prerequisites:

  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 –  https://www.qualtrics.com/support/survey-platform/survey-module/survey-module-overview/

Website/App Feedback –  https://www.qualtrics.com/support/website-app-feedback/creating-website-app-feedback-project/

 

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%20Plugin%20Project

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.

Extensions

Extensions

 

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.

this.embedWebsiteFeedbackStarter();

 

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

embedWebsiteFeedbackStarter: function () {
			/* eslint-disable */
			//BEGIN QUALTRICS WEBSITE FEEDBACK SNIPPET

			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 () {
						t.go()
					}, !1) : window.attachEvent && window.attachEvent("onload", function () {
						t.go()
					}) : t.go()
				};
			};
			try {
				(new g(100, "r", "QSI_S_ZN_6sO4Br3Spbt61a5",
					"https://zn6so4br3spbt61a5-sapdemo.siteintercept.qualtrics.com/SIE/?Q_ZID=ZN_6sO4Br3Spbt61a5")).start()
			} catch (i) {}

			//END WEBSITE FEEDBACK SNIPPET
			/* 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",
					"https://zn6so4br3spbt61a5-sapdemo.siteintercept.qualtrics.com/SIE/?Q_ZID=ZN_6sO4Br3Spbt61a5")).start()
			} catch (i) {}

 

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

Website%20Feedback

 

Website Feedback

Code%20Snippet%20from%20Qualtrics

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%20Button

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%20Mapping%20for%20Catalog

Target Mapping for Catalog

 

Fill in the details as given in the below screenshot.

Configure%20Target%20Mapping

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%20Service

Portal Service

 

Create a new site. Choose the Fiori Launchpad Template.

Portal%20Template

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%20type

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).

Conclusion

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. 🙂

4 Comments
You must be Logged on to comment or reply to a post.