Intro

Demo

Lorem ipsum but make it techy: “Loading… Enhancing… Screenshot-ifying… Complete!”

Actions

• takeScreenshotPreview

  Captures a specified element on your app, generates a screenshot, and displays it in a preview container. Users can visually confirm the screenshot before choosing to download it.

  Arguments

  rawElementId	Specifies the ID of the HTML element you want to capture as a screenshot. Requires a string representing the id of the target element.
  fileName	Sets the name of the file for the downloaded screenshot. Pass the name (including .png) as the fileName argument.
  previewContainerId	Specifies the ID of the container where the screenshot preview will be displayed. Add a container element in your app layout with a unique id. Pass the id of this container as the previewContainerId argument.
  showButton	Determines whether the "Download" button is displayed in the screenshot preview (true to show, false to hide).
  buttonText	Customizes the text displayed on the "Download" button (default: "Download Screenshot").
  buttonClass	Specifies a CSS class to apply custom styles to the "Download" button.

• takeScreenshotDownload

  Captures a specified element and immediately downloads the screenshot as an image file, bypassing the preview step.

  Arguments

  rawElementId	Specifies the ID of the HTML element you want to capture as a screenshot. Requires a string representing the id of the target element.
  fileName	Sets the name of the file for the downloaded screenshot. Pass the name (including .png) as the fileName argument.

Guide

• 1. Add Elements to Your App

  a) Target Element
  • Add an element in your app layout that you want to capture as a screenshot.
  
  b) Preview Container (For Preview Action Only)
  • Add a container to display the screenshot preview.

• 2. Add the Custom Actions

  a) TakeScreenshotPreview
  • Use this action to generate a preview of the screenshot before downloading.
  
  b) TakeScreenshotDownload
  • Use this action to immediately download the screenshot without previewing.

• 3. Configure Workflow Arguments

  a) For TakeScreenshotPreview
  
  • Add the following arguments to the custom action:
  • rawElementId: The id of the target element to capture (e.g., "capture").
  • fileName: The desired file name for the downloaded screenshot (e.g., "my_preview.png").
  • previewContainerId: The id of the container where the preview will appear (e.g., "screenshot-preview").
  
  b) For TakeScreenshotDownload
  
  • Add the following arguments to the custom action:
  • rawElementId: The id of the target element to capture (e.g., "capture").
  • fileName: The desired file name for the downloaded screenshot (e.g., "my_screenshot.png").

• 4. Attach Actions to a Workflow

  a) Add Buttons
  
  • Create buttons to trigger each action.
  
  b) Link Buttons to Workflows
  
  • For Preview Screenshot:
  • Attach a workflow to the “Preview Screenshot” button.
  • Add the TakeScreenshotPreview action and configure its arguments.
  • For Download Screenshot:
  • Attach a workflow to the “Download Screenshot” button.
  • Add the TakeScreenshotDownload action and configure its arguments.

• 5. Customizing Button (If using Preview)

  a) Use the showButton argument to determine if the button should appear:
  
  • Set to true to display the button.
  • Set to false to hide the button.
  
  b) Change the Button Text
  
  • Use the buttonText argument to set the text displayed on the button.
  • Default text is "Download Screenshot", but you can customize it to fit your app's needs.
  
  c) Apply Custom Styles
  
  • Use the buttonClass argument to apply a pre-defined CSS class to the button.
  • This lets you style the button consistently with your app's design.
  • Note - See how it is implemented as a 'Style' element in this example.

FAQ

• Why isn’t a screenshot of my element working?

  Make sure the rawElementId provided matches the id of the element you want to capture. Double-check your Toddle workflow configuration to ensure the correct rawElementId is being passed to the action.

• Why are linked images missing from the screenshot?

  This issue often occurs due to cross-origin restrictions. If an image is hosted on a different domain, the browser may block it unless the image server allows cross-origin access. Add the crossorigin=anonymous attribute to the <img> tag.

• My image still doesn’t work after adding crossorigin. Why?

  Even with the crossorigin=anonymous attribute, the server hosting the image must explicitly allow cross-origin requests. If the server doesn’t support this you will need to download and host the image yourself.

• Can I capture an entire webpage instead of a single element?

  Yes, you can set the rawElementId to the id of the body on your website. However, be cautious as capturing very large pages may cause performance issues.

• Can I style the preview image and download button?

  It is possible to customize the button’s appearance by modifying the JavaScript in the action to include your desired CSS class. Currently, this requires breaking into the JS code within the action. A future update may allow passing a CSS class directly as an argument for easier customization. For now, you can manually add styles in the JS or inline style definitions.

• Why is the preview container not displaying anything?

  Ensure the previewContainerId matches the id of an existing element in your app layout. Also, confirm the container is visible and styled appropriately to display the image.

• Can this capture elements with animations or videos?

  html2canvas captures the current state of an element at the time of rendering. Animations will be frozen at the captured moment, and videos are not rendered into the screenshot.