Ability to Hide/Show Survey Programmatically

[marc-wilson]

This feature was requested once before (PostHog/posthog#18245) but it doesn't appear to be fully implemented. renderSurvey was added (#1324) to address the feature request but instead of adding the ability to programmatically hide/show, it takes over the rendering process. This leaves us having to provide our own styling and custom elements to support what's rendered. This feature is great if you are just wanting to take over the rendering process.

However, my request is purely around the ability to hide/show it which i believe is what the original issue was about.

I would like a function, show/hide for example, that allows me to purely render the out of the box survey from posthog. My intent is to have this survey appear when someone clicks a button instead of automatically when the user visits the page. I understand there are options in the UI to do this, but it renders a button on the page that I don't have any control over (outside of basic styling).

I have a custom button, somewhere on the page that i control. When a user clicks that button, I want to show my survey. If it were possible to provide options around the location of where the survey is rendered (over the current element, default, center of screen, etc...), that would be great too.

[lucasheriques]

Hey @marc-wilson, instead of using the renderSurvey method, have you though about using a Feedback Button-type survey instead?

This way, this survey will be triggered once the element found via CSS selector is clicked.

However, I hear you on the feature of renderSurvey. If we hear more people asking for this, I'll prioritize being able to render the survey with all styles attached, but for now, please try the feedback button option and let me know if that suffices

[mirusky]

For me one of the reasons why we need show/hide the surveys programmatically, it's because surveys doesn't support i18n.

So the workaround was creating many surveys, but now we have a problem that we can't add the same selector for all the surveys since it will trigger all of them.

So the other workaround (i didn't tested, but probably works) was using different selectors:

// css selector #survey[data-lng="en-us"]
const SurveyBtn = () => {
  const { t, lng } = i18n()
  return <Button id=`survey` data-lng={lng}>{t('survey_btn')}</Button>
}

So having a way to show/hide programmatically will be better than having many workarounds in the code.

[mirusky]

I was reading the docs and I'm curious if event triggered surveys + custom event capture, could show/hide the surveys normally.

[lucasheriques]

@mirusky @marc-wilson coming soon with this PR. Implementing a new method, renderSurveyPopup(surveyId: string), that will be able to render the survey deliberately