Can we modify the rendering if displayed into an iframe ?

[nicolas-bastien]

Hi,

I used to use vitepress for my documentations but I find it so great that I build complete static website with it now !

I'm developing a SaaS project and I want to display a presentation page directly inside the app for each premium feature.
I realized that the content I want to display inside the app is the same as the feature description inside the website minus header, footer and some blocks.

I was wondering if I could integrate the website page inside the app with an iframe if I found a way to remove some part of the page.

like <iframe src="/feature-page?mode=iframe" />

and on vitepress if mode=iframe I can remove html blocks like header, footer... and remove js tracking code and chatbot.

Does somebody knows how to do that ?
Thanks a lot for your help.

Here is an example of a real page : https://www.smartplatform.cloud/fr/fonctionnalites/vue-kanban

[brc-dd]

You can do something like this:

// .vitepress/config.ts

import { defineConfig } from 'vitepress'

export default defineConfig({
  head: [
    [
      'script',
      { id: 'check-iframe' },
      `window.self !== window.top && document.documentElement.classList.add('iframe')`
    ]
  ]
})

And add this to styles:

.iframe header {
  display: none !important;
}

/* ... for footer, etc. similarly. override any padding, etc. too if needed */

For chat widget, I'm not sure what your code looks like, but probably you can conditionally initialize that? Or you can hide it from CSS too.

BTW very clean site.

[nicolas-bastien]

Thanks I'll try that.

For the widget, I add it in config file like this.

if (isProduction) {
  head.push(['script', { defer: '', 'data-domain': 'smartplatform.cloud', src: 'https://plausible.io/js/script.js' }])
  head.push(
    [
      'script',
      { 'type': 'text/javascript' },
      `window.$crisp=[];window.CRISP_WEBSITE_ID="xxxxx";(function(){d=document;s=d.createElement("script");s.src="https://client.crisp.chat/l.js";s.async=1;d.getElementsByTagName("head")[0].appendChild(s);})();`
    ]
  )
}

[brc-dd]

So make it something like this:

  head.push([
    'script',
    {},
    `\
      window.$crisp = []
      window.CRISP_WEBSITE_ID = 'xxxxx'
      ;(function () {
        if (window.self !== window.top) return
        const script = document.createElement('script')
        script.src = 'https://client.crisp.chat/l.js'
        document.head.appendChild(script)
      })()`
  ])

[nicolas-bastien]

Thanks a lot for your help @brc-dd.

I'll work on it and post back when ready.

[mathieu-ducrot]

Hi @brc-dd i work with @nicolas-bastien and i'm pinging you back to say that we did implement your code, and it works like a charm, thanks a lot.
You can close the discussion if you want.