BookStack Code Mirror - hacks/blob - content/iframe-specific-tweaks/index.md

   1 +++
   2 title = "IFrame Specific Tweaks"
   3 author = "@vincent @ssddanbrown"
   4 date = 2023-03-20T00:00:00Z
   5 updated = 2024-04-22T00:00:00Z
   6 tested = "v24.02.3"
   7 +++
   8
   9 This hack will add custom styles & scripts, hiding many parts of the interface while adding additional light/dark mode control,
  10 intended to provide a cleaner view that's suitable for use within iframes embedded on external pages.
  11
  12 This can be useful if you use BookStack as a knowledge base, and you want to integrate contextual help for your app, with content from BookStack.
  13
  14 #### Considerations
  15
  16 - The forced dark/light mode control works via JavaScript, so will not run where a user has JavaScript disabled although this is relatively rare.
  17 - This specific example will only affect the loaded page view, not subsequent clicks to other parts of the application within the iframe.
  18
  19 #### Usage
  20
  21 Use the original page url, with the GET query params `iframe=true` and `theme=dark|light`. For example:
  22
  23 ```html
  24 <iframe src="https://docs.example.com/books/my-book/page/my-page?iframe=true&theme=dark"></iframe>
  25 ```
  26
  27 The styles and script logic provided is just an example starting point. You should customize these to suit your own needs.
  28
  29 #### Code
  30
  31 {{<hack file="layouts/parts/base-body-start.blade.php" type="visual">}}