Class ModalSurvey

Modal structure

The structure of the modal can be described as follows:

<div class="hello-customer-modal">
  <div class="hello-customer-modal__window">
     <div class="hello-customer-modal__bar">
         <div class="hello-customer-modal__close-button">
             ICON
         </div>
     </div>
     <iframe class="hello-customer-survey__survey"></iframe>
  </div>
</div>

Provided class names are the once defined by the library itself by default, and can be overwritten using classNames property of the configuration object.

In order to modify styles attached to the modal elements using aforementioned class names, You can use modalStyle property of the configuration object,

Example (es module)

import { UrlBuilder, InlineSurvey } from '@hello-customer/website-touchpoint'
const urlBuilder = new UrlBuilder({
  baseUrl: 'https://base.com',
  language: 'EN',
  tenantId: 'xxxx',
  touchPointId: 'zzz',
  extra: {
    isPreview: true
  }
});
const modalSurvey = new ModalSurvey(urlBuilder, {});

Example (script tag)

<script src="https://unpkg.com/@hello-customer/website-touchpoint"></script>
<script>
const urlBuilder = new hcWebsiteTouchpoint.UrlBuilder({
    baseUrl: 'https://base.com',
    tenantId: 'xxxx',
    touchPointId: 'zzz',
    language: 'EN',
    extra: {
      isPreview: true
    }
   });
const modalSurvey = new  hcWebsiteTouchpoint.ModalSurvey(urlBuilder, {});
</script>