Quicksave Logo

Drupal QSApp Plugin

A Drupal module that allows you to embed interactive QSApps on your site. Supports both configurable blocks for site-wide placement and shortcodes for inline content embedding.

Download

QSApp Drupal plugin

Installation

  1. Extract and place the module in /modules/custom/qsapp_plugin/ folder

  2. Enable the module

    • Go to Extend → find QSApp (under the QSApp category) → Install

  3. Configure your QSApps

    • After installation, click Configure or go to Configuration → Media → QSApp
    • Add entries for each QSApp you want to use
    • Give each a clear Label, paste the QSApp ID, and optionally set defaults
    • Click Save configuration

Usage

You can embed QSApps in two ways:

Method A: Using Blocks (Recommended for site-wide placement)

  1. Go to Structure → Block layout
  2. Click Place block in the region where you want the QSApp
  3. Search for "QSApp Block" and click Place block
  4. In the block settings:
    • Select QSApp: Choose from your configured QSApps
    • Block-specific overrides (optional): Override width/height for this placement
    • Visibility conditions: Set where the block should appear
  5. Save block

Method B: Using Shortcodes (Recommended for inline content)

  1. Enable the filter (one-time setup):

    • Go to Configuration → Content authoring → Text formats and editors
    • Click Configure next to your text format (e.g., "Full HTML")
    • Check the box next to "QSApp Shortcode"
    • Save configuration

  2. Use shortcodes in your content:

    [qsapp id="81cf2456-0979-4880-9729-19ab21f0d87e" width="800px" height="600px" mode="canvas"]

You can replace the id with your own QSApp ID and adjust the width and height as necessary.

Advanced Options

Shortcode Attributes

When using shortcodes, you can customize the appearance and behavior:

Available attributes:

  • id (required): The QSApp ID
  • width: Width (default: 100%)
  • height: Height (default: 600px)
  • mode: "canvas" or "iframe" (default: canvas)
  • defer_loading: "true" or "false"
  • hide_loading: "true" or "false"
  • loading_image: URL to custom loading image
  • class: Additional CSS classes

Custom loading image:

[qsapp id="QSAPP_ID" loading_image="https://example.com/my-custom-loader.png"]

Hide loading screen:

[qsapp id="QSAPP_ID" hide_loading="true"]

Block Configuration

When using blocks, you can configure these options in the admin settings:

  • Default width, height, and mode per QSApp
  • Custom loading images
  • Per-block overrides for width and height