Answered

Remove Typeform-generated content when moving between pages

  • 28 December 2021
  • 9 replies
  • 106 views
S

Hello!

We have an SPA where we’re showing a Typeform questionnaire on the home/dashboard page, but we then want to remove the Typeform on navigating to a different page.  Typeform generates its own HTML to present the questionnaire:

Is there a consistent way that we can use to access this content (something that will be consistent from version to version)?  Previously we were using the “typeform-sidetab” class to find it, but now this has changed to “tf-v1-sidetab”, and it might change again in future…  Is there a way that we can ID the Typeform-generated div ourselves perhaps?  Or is there some clean-up function we can invoke if we want to remove the Typeform HTML when navigating to a different route?

icon

Best answer by mathio 28 December 2021, 12:08

View original

9 replies

Liz
Rank
Userlevel 7
Badge +5

Hi @stahfacedquail Happy Tuesday! Thanks for stopping by the community. This would definitely involved some custom-coding, so I’m tagging @mathio here who may already have a solution for you. :grinning:

Life is a series of awkward moments separated by snacks.
mathio
Rank
Userlevel 7
Badge +5

Hello @stahfacedquail 

if you have a SPA then you can render your typeform sidetab only on pages you want to display it on.

If you want a hacky solution you can use the “tf-v1-sidetab” class name for now or wrap the embed code in a custom element and hide that one.

S

Thanks so much, @Liz and @mathio ; this definitely helps.  The idea of embedding the code in a custom element sounds like it would work best for us as we want to avoid duplicating the Typeform code…  How can we direct Typeform to put the code into a specific element?  I would have thought the “container” option would help, but I see that only works for the widget?

mathio
Rank
Userlevel 7
Badge +5

You can try something like this:

<div id="my-typeform-container">
  <!-- place you embed snippet here --> 
</div>

Then you can use CSS or JavaScript to show & hide the my-typeform-container element.

S

Thanks, @mathio ; I’ve now targetted a specific div for the embed and it’s working like a charm.  I just want to double-check: am I correct in saying that one can only specify where to do the embed if they embed via JS?  There isn’t a way to direct the embed if embedding via HTML (and that Typeform will always default to appending the form to the document’s body element in this case)?

mathio
Rank
Userlevel 7
Badge +5

You can do it via both HTML and JS embed codes. It all depends on how you build your website.

S

In the HTML embed case, does the location of the embed depend on where I put the div with all the data-tf-… attributes, or can I specify the container for the embed by using an attribute something like below:

data-tf-container=”div#theEmbedContainer”

 

mathio
Rank
Userlevel 7
Badge +5

Sorry, you are correct, you need to use JS embed to place the embed into a specific div.

To use HTML snippet you would need to conditionally include the snippet in your SPA.

S

Perfect; thanks for all your help!  Thanks so much.

Reply


Still need help?

Don't be shy and ask the community.

Ask your question here!
Community T&Cs