What are the steps for iFraming a Demo experience into an Answer's vertical?

Search
1

Hello! A client wants to iFrame an interactive click-through demo experience from their main site into our “Demos” vertical page so that a user can click through the demo without leaving our Answer’s Demo vertical page. Rather than having links that take a user to the demo experience on their main site, they want a user to be able to remain on our answers vertical and walk through the demo there. What would be the steps for doing this and what documentation would we need from the client?

Thanks!
Catalina

2

Hi @Catalina_Ruiz-Jimene –

I have a few question as I want to make sure I understand – they want to iframe an experience on the vertical page within Answers? (only on one vertical) instead of showing any results? Would it take up the whole page? What would happen when someone queried on that vertical page? Or would the demo experience be on Answers cards?

Are they also iframing the Answers experience onto their site or are they using a Subdomain? I ask because that would be an iframe within an iframe which may have implications cc: @roser

Alyssa

3

Hi @Alyssa_Hubbard -

Thank you for your quick response! They are iframing the Answers experience onto their site.

I created two demo entities. One of the entities is a landing page that has many demo options - this would likely remain a link. The other is a specific demo experience that they want to highlight. They want the results to be those two entities but for the actual demo to include the embedded demo click-through experience that they have on their main site. If someone queried on that vertical I assume that it would follow the same logic as other verticals where if the query is unrelated to demos it would have the “No results found” etc and then display the demos below that!

Please let me know if this doesn’t make sense!

Thanks
Catalina

4

Hi @Catalina_Ruiz-Jimene -

If it’s appearing in the card, then I think there are a few options. One is to use the description or similar field in the Knowledge graph in the entity and add the code for the iframe for the demo experience. Then call this field in the card for the demo. You could add conditional formatting in the card.json to indicate what to use if the field is empty and you only want to demo link.

Another way could be to add the iframed code for the demo experience to the card template in the hbs file and then use a toggle in KG to indicate when to show it or not (i.e., for the entity you want it to show, the field is yes, for the entity you dont want it to show).

These are some ideas but definitely QA thoroughly to make sure it works across devices and browsers. Hope that helps!

Alyssa