End Of Survey Message | Automatically close survey

Hello @parkie_0007!

That’s something you can do for Pop-Over creatives with the option “FOR QUALTRICS SURVEYS AS EMBEDDED TARGETS, ATTEMPT TO CLOSE POPOVER ON SURVEY COMPLETION”. Maybe you can give it a chance if it’s not the creative type you are currently using :) 

Best regards.

Hi @parkie_0007 , Pop-over can definitely help and would be easy to manage through qualtrics. Else, you can use parent.postMessage to post end of survey and close the creative window through custom script on your website.

Thanks,

JB

Thanks Both!

Ideally I want to keep the same creative and just have the window close and fall back into the website to the Give Feedback tab.

you can use parent.postMessage to post end of survey and close the creative window through custom script on your website.

How would I do this?

Thanks!

Hi @parkie_0007, In this case, you can use postmessage method and trigger click for QSIFeedbackButton-btn on survey completion.

Thanks for this, can you share with me how I would do this?

Thanks :)

You can click on Feedback button after clicking submit. Paste this code in snippet before </script> closing tag.

keep # as it is and replace “Submit button ID” text with actual ID of survey submit button and “feedback button ID” text with it’s actual ID. 

jQuery("#Submit button ID").click(function(){
     jQuery("#feedback button ID").trigger('click');
});

You can get both IDs via inspect element feature of browser and replace it in above codes. To get inspect element option click F12 or right click on webpage and select inspect. as mentioned below.

@ArunDubey I’m unable to find the feedback ID button. Upon inspect, i’m observing like below: 

I did try, slider-control-SI_xxx didnt work

<div id="slider-control-SI_xxx" tabindex="0" style="height: 100px; width: 33px; left: 0px; top: 0px; cursor: pointer; position: absolute; z-index: 2100000000; background: transparent;"></div>

@Bharat , What kind of survey you are preparing? Website/app intercept or CX normal feedback survey? did you use # before ID like “#slider-control-SI_xxx” or you simply use “slider-control-SI_xxx”. also wanted to confirm. ID should always refer with # and class refer with . (dot) . Also confirm, where did you get this ID? from survey builder or from website run. Please confirm both things. 

@ArunDubey Thanks for following up on this.

1. I have created - Website/app intercept → With Creative as ‘Slider’ and Intercept as ‘Web intercept’
2. did you use # before ID like “#slider-control-SI_xxx” or you simply use “slider-control-SI_xxx”. → I did use #slider-control-SI_xxx
3. In creative as slider, i have ‘cross button’ and  ‘give feedback’ as visible control that toggle slider in and out. 
4. Once i publish and active, intercept / creative. I visited actual link, click on feedback button, it open up slider, I submitted Q1 that is 5 point scale question → Click next → On this I can see submit button. 
5. In chrome, inspect, i even recorded cursor activity this is as below: This is closing the slider 

    type: click
    target: main

    selectors
Selector #1 :
            #slider-control-SI_646474Ybhdkd
Selector #2 :
xpath///*[@id="slider-control-SI_646474Ybhdkd "]
   Selector #3 :

            pierce/#slider-control-SI_646474Ybhdkd
    offsetY: 62
    offsetX: 20

Also, here is inspect on feedback button

<div id="slider-control-SI_646474Ybhdkd " tabindex="0" style="height: 100px; width: 33px; left: 0px; top: 0px; cursor: pointer; position: absolute; z-index: 2100000000; background: transparent;"></div>

<div class="QSISlider SI_646474Ybhdkd _SliderContainer" style="position: fixed; top: 177px; left: 113px; z-index: 2000000000; width: 0px; height: 0px;"><div id="slider-control-SI_646474Ybhdkd " tabindex="0" style="height: 100px; width: 33px; left: 0px; top: 0px; cursor: pointer; position: absolute; z-index: 2100000000; background: transparent;"></div>

Hi @ArunDubey - I’m working on this same use case and have attempted to implement the below code into our code snippet before the /script tag as you had noted:

            jQuery(function(){
  // Check if the element with ID "EndofSurvey" exists
  if (jQuery("#EndOfSurvey").length > 0) {
    // If "EndofSurvey" is present, trigger a click event on the element with ID slider-control-SI_9oFsMPER34IurT8
    jQuery("#slider-control-SI_9oFsMPER34IurT8").trigger('click');
  }
});

I am using the slider creative and modified the code slightly because this digital program does not have a submit button.  The code is currently not working as intended.  When inspecting, I see the following error in the console

Uncaught ReferenceError: jQuery is not defined

Do you have any advise on how I can resolve this?  Thank you for all of the information so far!