Inline Frame

An inline frame (iframe) allows you to embed external resources, such as widgets or tools, within your web application. This allows modular integration and controlled communication between the parent and the embedded content.

Integrate the DSA feedback form with iframe

To integrate the DSA feedback form into your application using an iframe, follow the below steps:

1. Set your website's Content Security Policy (CSP) headers to allow loading the DSA feedback form.
   Example:
   HTTP

    Content-Security-Policy: frame-src 'self' https\://\*.bazaarvoice.com;\`
   

2. Use the DSA feedback submission API to get the DSA feedback form URL for your environment (Production or Staging). Ensure the domain matches the source from which the iframe will be loaded.
3. Dynamically create and embed the DSA feedback form as a child iframe in your webpage with the retrieved URL as its src attribute. For more information on how to get the DSA feedback form URL, refer to the DSA Feedback Submission topic.
   Example:
   HTML

    <iframe width="900" height="800" src="https://test.dsacompliance.bazaarvoice.com/dsa/iframe/28/e9912a6e1569/?reference=12345&amp;url=www.google.com&amp;hash=e99769960f5f83c35b1f1f52529a9d4a4e12119f0e15969e8c5939313090cf12&amp;domain=apps-qa.bazaarvoice.com&amp;dhash=5901315e2737b477b9f4a6b9f608a62cc73d58afefc19044bef3783563498f4f">
   </iframe>
   

4. Modify the iframe attributes if required.
   • width and height: Define the dimensions of the iframe.
   • src: This is obtained from the DSA feedback submission API.
5. Use the postMessage API in JavaScript to establish communication between the parent application and the child iframe (DSA Feedback Form).

Communicating with the iframe Using JavaScript postMessage

To enable interaction between the parent window and the child iframe, use the postMessage API. Below are the events and their usage.

Receiving events from iframe

The parent window can listen to the events below using the following message event listener.

Example:

window.addEventListener('message', event_from_iframe => {
       const dsaEvent = event_from_iframe.data;
       if (dsaEvent.event === 'bv_dsa_event') {
          if (dsaEvent.name === 'onPageLoad') {
             //Perform action
             //Check for dsaEvent.data object for pageType
             console.log(`Page type for this event is ${dsaEvent.data.pageType}`)
          } else if (dsaEvent.name === 'onClickSubmit') {
             //Perform action
		         //Check for dsaEvent.data object for pageType
		        console.log(`Page type for this event is ${dsaEvent.data.pageType}`)
          } else if (dsaEvent.name === 'onFormSubmitted') {
              //Perform action
		          // Check for dsaEvent.data object for information such as caseId, 'success' flag to check if form submission was success/Example - 
              console.log(`Form is success: ${dsaEvent.data.success}`)
              console.log(`Unique ID: ${dsaEvent.data.caseID}`)
          } else if(dsaEvent.name === 'onWindowClose') {
              //Actions to be performed after DSA form is closed
              //Listen to this flag to remove the iframe attached to the document
          }
       }
 })

Sending events to the parent window

Each event in the example below enables a specific interaction between the child iframe (DSA feedback form) and the parent window. These interactions are explained below.

1. onPageLoad Event

   Triggered whenever a page loads within the iframe. The available pages are

   • Start page: The DSA feedback form is displayed.
   • Overview page: The completed form is displayed for verification before submission.
   • Confirmation page: The verified form is successfully submitted.

2. onClickSubmit Event

   Triggered when the user submits the form from either the Start page or Overview page.

3. onFormSubmitted Event

   Triggered when the Send button is clicked from the overview page. It includes details about whether or not the submission was successful. A unique ID for the report is sent with every successful submission.

4. onWindowClose Event

   Triggered when the Close button is clicked on the confirmation page.

   ℹ️

   Note:

   When embedding the DSA feedback form within an iframe inside a modal, it is crucial to listen for the onWindowClose event. This event is triggered when the consumer clicks the Close button after submitting the form, ensuring that the iframe is removed upon successful submission.

Clear cache

The parent window must trigger an event to allow the iframe to clear its cache when the user closes the form outside of the iframe.
For example, if DSA is implemented within a modal, an event should be triggered when the user closes the modal, notifying the iframe to clear the cached data.

// Example: Closing the modal containing the iframe
function closeIframeModal() {
   const iframe = document.getElementById('myIframe'); // Replace with your iframe ID
   iframe.contentWindow.postMessage({ action: 'clearLocalStorage' }, '*');
   // Close the modal or iframe container
   document.getElementById('modal').style.display = 'none';
}

Example

The images below demonstrates the DSA form submission workflow:

1. Start Page: Enter the required details in the form.

   

2. Once you entered the details, click submit.

   

3. Overview page: Review the details you have entered and click send.

   

4. Confirmation page: A confirmation message will appear; click close to exit the DSA form.

   

Best Practices

1. Embed only one iframe at a time. It is also recommended to implement the iframe within a modal window.
2. After feedback is submitted for a specific content, it is recommended to disable the Report button for that content.
3. Add a X button in the modal window to let users close the form anytime.