Access fields within iframes and shadow DOMs

In some cases, the form fields live inside isolated DOM boundaries, such as within <iframe> elements or shadow DOM roots. One example where this is typical is when the request editor is a rich text editor (as opposed to a plain-text textarea element). The support form deflector query selectors support special operators for traversing DOM boundaries and accessing such fields.

Accessing main input within an iframe

To select a form input within an iframe, use the special ifr>> operator. For example, consider a form with the following (resolved) HTML markup. Within the form is an iframe with a textarea element that we want to pass on to Kapa.

<form id="new_request" autocomplete="off">
  <div class="form-field">
    <label id="request_subject_label" for="request_subject">Subject</label>
    <input type="text" id="request_subject" />
  </div>
  <div class="form-field">
    <label id="request_description_label" for="request_description_ifr">
      Please describe your issue.
    </label>
    <iframe id="request_description_ifr">
      <!DOCTYPE html>
      <html>
        <body>
          <p id="wysiwyg" contenteditable="true"></p>
        </body>
      </html>
    </iframe>
  </div>
  <input type="submit" name="commit" value="Submit" />
</form>

Given this HTML structure, to select the contenteditable field inside the iframe as the main input for the support form deflector, you can use the following query selector:

data-main-input-query-selector="#request_description_ifr ifr>> #wysiwyg"

The complete script tag for this example form might look something like this:

<script
  async
  src="https://widget.kapa.ai/kapa-support-form-deflector.bundle.js"
  data-integration-id="YOUR_INTEGRATION_ID"
  data-project-color="#YOUR_HEX_CODE"
  data-main-input-query-selector="#request_description_ifr ifr>> #wysiwyg"
  data-extra-input-query-selectors="#request_subject"
  data-extra-input-names="Subject"
  data-submit-element-event-type="onSubmit"
  data-anchor-element-query-selector="#new_request input[name=commit]"
  data-anchor-element-position="beforebegin"
  data-pre-submit-info-text="Our AI assistant will check if we can help you right away. If you still need assistance afterwards, you can submit a ticket to our support team."
></script>

Accessing fields inside shadow DOM

To target elements inside a Shadow DOM, use the special sr>> operator in your query selector string. The sr>> operator represents boundaries for traversing nested shadow roots, allowing you to select elements within shadow DOMs seamlessly.

To build a query selector for a Shadow DOM element, follow these steps:

Construct the query selector path of the element.
1. Open your browser's developer tools and locate the shadow root element containing the element you need. Create a selector for the parent element that wraps the shadow root, for example:
```
#support-form div[data-shadow-root-wrapper]
```
  Ideally, the element has an id or some other attributes that uniquely identifies it on the page, that you can use to create a query selector string.
2. Next, create a selector for the element you need, relative to the shadow root DOM element. For example:
```
div > textarea
```
Alternatively, you can try using the Chrome browser's developer tools to copy a selector for the element: right-click the element you’d like to target, then select Copy > Copy JS path. This generates a JavaScript path that looks like the following:
```
document
  .querySelector(
    "#support-form div[data-shadow-root-wrapper]",
  )
  .shadowRoot.querySelector("div > textarea");
```
This path represents how the browser accesses elements within a shadow root by using shadowRoot.querySelector.

Construct the query selector with sr>>.

Join the two query selectors together into one string, segmented by the sr>> operator to indicate that the second part of the selector targets an element within a shadow DOM. For example:

// Original selector pair
"#support-form div[data-shadow-root-wrapper]" // Shadow DOM wrapper
"div > textarea"                              // Element within shadow DOM

// Final selector
"#support-form div[data-shadow-root-wrapper] sr>> div > textarea"

Accessing main input within an iframe​

Accessing fields inside shadow DOM​

Accessing main input within an iframe

Accessing fields inside shadow DOM