Carousel buttons interfere with LimeSurvey

[FRANZKAFKA13]

Hello,

I am trying to embed my Chatbot with this client into a LimeSurvey survey. Unfortunately, when I click on a carousel button (e.g. for suggested actions or a card carousel), the survey jumps back to the first page (the URL changes), which makes them impossible to use in the survey. When embedding the bot with the "standard webchat" approach (embed code on channel configuration page in the Azure portal), the buttons work fine. The problem is, that I really need some of the features you implemented (e.g. avatar and initials). Do you think an iframe could solve this issue? Is there a way to combine iframe with this approach of embedding while still being able to use features like redux actions? (see: #1557)

The communication between the LimeSurvey website and my Chatbot is essential while the carousels are just a "nice to have" feature which make it much easier for the user to use the bot. Is there a solution that covers both?

Thank you very much in advance! This is my current code:

<div id="webchat" role="main"> </div>
<style type="text/css">html, body { height: 100% }

  body {
    margin: 0px
  }

  #webchat, #webchat > * {
    height: 600px;
    width: 700px;
    margin-left: auto;
    margin-right: auto;
  }
  .css-1lk64yk.bubble {
    margin-left: 15px;
  }
  .css-1lk64yk.from-user.bubble {
    margin-right: 15px;
  }

  .css-1phiexw {
    margin-right: 15px;
    margin-left: 15px;
  }
  
  #question{QID} input {
    color:black;
  }
  


</style>
<script src="https://cdn.botframework.com/botframework-webchat/master/webchat.js"></script><script>
  // Style modifications
  const styleOptions = {

    // Colors
    bubbleBackground: 'rgba(217, 217, 217, 0.15)',
    bubbleFromUserBackground: 'rgba(0, 150, 130, 1)',
    bubbleFromUserTextColor: 'white',
    bubbleMaxWidth: 600, // maximum width of text message

    // Avatar
    //avatarSize: 100,
    //botAvatarImage: '',
    botAvatarInitials: 'Bot', 
    //userAvatarImage: '',
    userAvatarInitials: '', 

    // Send box
    hideSendBox: false,
    hideUploadButton: true,
    sendBoxButtonColor: '#767676', 
    sendBoxButtonColorOnDisabled: '#CCC',
    sendBoxButtonColorOnFocus: '#333',
    sendBoxButtonColorOnHover: '#333',
    sendBoxHeight: 40,

    // Suggested actions
    suggestedActionTextColor: 'black',
    suggestedActionBorder: `solid 2px #009682`,
    suggestedActionHeight: 30,

  };

/*   // Redux Store (to be implemented)
  const store = window.WebChat.createStore(
    {},
    ({ dispatch }) => next => action => {
      // TODO: [P4] Investigate why we need to wait until DIRECT_LINE/CONNECTION_STATUS_UPDATE, instead of DIRECT_LINE/CONNECT_FULFILLED.
      if (action.type === 'DIRECT_LINE/CONNECTION_STATUS_UPDATE' && action.payload.connectionStatus === 2) {
        // After connected, we will send a message by dispatching a Redux action.
        dispatch({ type: 'WEB_CHAT/SEND_MESSAGE', payload: { text: 'sample:backchannel' } });
      } else if (action.type === 'DIRECT_LINE/INCOMING_ACTIVITY') {
        // When receiving an activity of type "event" with name of "sample:backchannel", prompt it out.
        const { activity } = action.payload;
        if (activity.type === 'event' && activity.name === 'sample:backchannel') {
          alert(JSON.stringify(activity, null, 2));
        }
      }
      return next(action);
    }
  );   */
  
  window.WebChat.renderWebChat({
    directLine: window.WebChat.createDirectLine({ secret: 'MY SECRET' }),
    userID: '123',
    styleOptions,
    // store
  }, document.getElementById('webchat'));

  document.querySelector('#webchat > *').focus();
</script>

[corinagum]

Hi @FRANZKAFKA13, I'm sorry you're having trouble with Web Chat and Lime Survey.
Unfortunately there's zero customization ability when using the iframe embed option. This partially has to do with the fact that the iframe provided by Azure Portal is using v3 of Web Chat, which doesn't allow for customization the way v4 does.

We have an active issue #1086 which is the tracking item for updating Web Chat within the portal. This would allow for v4 of Web Chat to be used with iframe, but I'm not confident that this means the embed will support customization. @compulim do you have further insight?

[compulim]

@FRANZKAFKA13 I want to ask more about "click on a carousel button on Web Chat carousel (suggested actions) will cause the URL to change".

Which button are you talking about?

• Carousel flipper (left/right button, which will scroll the carousel)
• Suggested action button inside a carousel

And what is the difference between old and new URL?

If URL didn't change and just show up a blank page, can you go into F12 dev tools and see if you got any JavaScript errors?

[FRANZKAFKA13]

Thanks for the clarification @corinagum. Then I will keep embedding the bot without iframe.

@compulim I am talking about the "carousel flipper"

I don't know if you ever used LimeSurvey so I will explain a few things to make sure you understand the problem. I created a survey, which is not published yet. The chatbot is embedded in one of my 16 question pages (page 4). I have the option to preview the question or preview the whole survey.

Case 1: Single question preview (the one the bot is embedded in)

The preview URL is:
https://MY_UNIVERSITY_PATH/limesurvey/index.php/survey/index/action/previewquestion/sid/633462/gid/857/qid/5992
When clicking the "carousel flipper", the URL changes to "https://MY_UNIVERSITY_PATH/limesurvey/index.php/633462" and I see the first page of my survey.

No JS error.

Case 2: Whole survey preview

The preview URL is "https://MY_UNIVERSITY_PATH/limesurvey/index.php/633462".
When clicking the "carousel flipper", the URL does not change and the pages gets refreshed and I can start a new conversation with the bot.

I get the error: "3633462:294 Uncaught SyntaxError: Identifier 'styleOptions' has already been declared
at 633462:294" - but I doubt it's related to the issue since I get this error once I reach the question with the chatbot and not when I click the button.

I once got a notification from LimeSurvey that said "Please don't use your browser navigation buttons" when clicking on the carousel flipper. So it seems like LimeSurvey interprets them as some kind of navigation or refresh button.

New problem
Since I conduct an experiment on chatbots, I have 4 different experimental groups. The chatbot is different in each group. In the survey, the 4 different questions (each with another chatbot embedded) are called randomly (see image). Since I haven't setup all 4 different chatbots yet, I use the exact same code to render all four questions (see my first post). Strangely, when I preview the whole survey, only in case of the "TreatmentLowLow", the bot is rendered. When another treatment is randomly called, the bot won't appear even though it's the exact same code. Do you have any idea what causes this?

[corinagum]

@FRANZKAFKA13 Would you be willing to add myself and @compulim to your project so we may take a look? This will save us some repro steps and hopefully let us help you faster. Please email me at [email protected] and we will discuss in further detail.

[FRANZKAFKA13]

@corinagum Thanks for your offer, I really appreciate it. Fortunately, I solved it by embedding the chatbot in an azurewebsite and then embedding it to LimeSurvey via iframe. This solved the problems caused by LimeSurvey (e.g. carousel flippers interacting with LS) and still allowed me to do all the customizations offered by your client.

Can be closed!