Is it possible to place the Answers search bar in an iFrame?

Search Best Practices - Search Front-End
1

Hello Community,

I have an Answers prospect who has limited ability to make changes to their existing website. They are not able to make direct edits to the page code, however they can add new iframes.

Since they won’t be able to place the Answers search following our typical steps, I was wondering if it’s possible to place the search bar using an iFrame?

Many thanks,
Max

2

Hi Max,

While this is theoretically possible it’s not recommended. The UX of the searchbar – getting it to integrate seamlessly into a header will be difficult. If additional modification of the HTML is a blocker, we’d recommend they try the Overlay instead.

Here would be the steps to add an iframe’d search bar:

A. Stand up a page in page builder

Here, you’ll follow the typical integration steps a client would normally do:

  1. Use a custom HTML module to add the search bar div:

<div class="search_form"></div>

  1. Edit the header html under “Settings” with the necessarily initialization and JS. You will be responsible for adding the redirectUrl. Because the searchbar will be in an iframe, you should also add the redirectUrlTarget. Here’s what the header.html will look like:
<meta name="robots" content="noindex" />
<link
    rel="stylesheet"
    type="text/css"
    href="https://assets.sitescdn.net/answers/v1.7/answers.css"
    />
    <script>
      function initAnswers() {
        ANSWERS.init({
          apiKey: "REPLACE_ME_API_KEY",
          experienceKey: "REPLACE_ME_EXPERIENCE_KEY",
          experienceVersion: "PRODUCTION",
          locale: "en", // e.g. en
          businessId: "REPLACE_ME_BUSINESS_ID",
          onReady: function() {
            ANSWERS.addComponent("SearchBar", {
              container: ".search_form",
              name: "search-bar", //Must be unique for every search bar on the same page
              redirectUrl: "REPLACE_ME_REDIRECT_URL",
              placeholderText: "Search...",
              redirectUrlTarget: "_top",
            });
          },
        });
      }
    </script>
    <script
      src="https://assets.sitescdn.net/answers/v1.7/answers.min.js"
      onload="ANSWERS.domReady(initAnswers)"
      async
      defer
    ></script>

B. Client adds an iframe with the search bar

Publish the page, then instruct the client to add an iframe that pulls in this page. For example: <iframe allow="geolocation" class="answers-search-form" src="https://c86884784d01.sandboxlandingpagespreview.com/en/index.html"></iframe> (but the URL would be replaced with the production page). They will need to add styling and sizing to the iframe to make sure it works correctly with their site.

C. Main experience integration

The page that hosts the answers experience, assuming it’s also in an iframe, should be stood up as normal.

Here’s a code sandbox example: answers iframe - searchbar in iframe - CodeSandbox

Let us know how this works for you!

Rose