Clipboard Suite Tutorial

Clipboard Stack

Installation

Drag and drop the Clipboard Stack to the required location on your stacks page and choose the content type.

The default content type is Markdown, but you also can choose Styled Text or My Stack, where you can add your own custom text stack.

The Clipboard Stack does not apply any styles to the text inside it, so any styles will be inherited from your theme or custom CSS.

Dark Mode

If your page uses Dark Mode, you can leave Dark Mode turned on, otherwise, just turn it off. You can also toggle Dark Mode off while editing to configure your Light Mode colors.

Copy Outline

When the user moves the mouse over the copy button, a customizable outline appears around the text to be copied. You have the option to turn this on or off.

Copy ToolTip

When the user clicks on the copy button, a customizable ToolTip appears. To change the colors, you can show the ToolTip in edit mode by enabling the checkbox.

Translation

If your page uses a language other than English, you can set the translation for the tooltip and aria label text.

Layout and Colors

The rest of the stack controls should be straight forward to adjust the layout and colors.


Clipboard Lite Stack

Installation

Drag and drop the Clipboard Lite Stack to the desired location on your stacks page and set the container type.

The default container is a block (div) container but you can also choose inline, list or table.

Block - Each item is wrapped in a div container and displayed vertically.
Inline - Each item is wrapped in a span container and displayed inline.
List - Items become part of an ordered or unordered list and are displayed vertically.
Table - Items are displayed inside a table. You can add rows and columns as neccessary.

Each item has an optional text control that enables you to set custom text that will be copied to the clipboard instead of the text that the user sees on the page. For example, display a country name to the user, but set the text to be copied as a link to that countries page.

Layout

The layout controls enable you to add margin, padding, border and shadow to your stack. You can also control the margin and padding of each item.

Styles

The Clipboard Lite stack does not apply any styles to your text. Text styling is inherited from your theme or custom CSS.

As with your text, the table inherits styles from your theme or custom CSS.


Clipboard Code Stack

</>HTML

Installation

Drag and drop the Clipboard Code Stack to the desired location on your stacks page.

Language

Set the code language from the dropdown list or select other if you don't see the language that you need.

If you selected other, you'll get the option to list all available languages in a table below the stack.

Dark Mode

If your page uses Dark Mode, you can leave Dark Mode turned on, otherwise, just turn it off. You can also toggle Dark Mode off while editing to configure your Light Mode colors.

Theme

There are 85 themes to choose from and you can select different themes for Dark Mode and Light Mode.

NOTE: All codeblocks will adopt the theme of the last codeblock on the page.

Toolbar

The optional toolbar displays the code language and changes the copy button to an icon with translatable text.

When the toolbar is disabled, a customisable copy button appears in the corner of the codeblock.

Translation

If your page uses a language other than English, you can set the translation for the tooltip and aria label text.

Clipboard Stack Settings

  • Slider Settings
    Google reviews slider settings
    Enable Slider : enable or disable the slider
    Slides to display : set the number of slides to display for each screen size
    Slides to scroll : set the number of slides to scroll for each screen size

    Medium : set the breakpoint (px) for medium screens
    Large : set the breakpoint (px) for large screens
    X-Large : set the breakpoint (px) for extra large screens

    Accessibility : enables tabbing and arrow key navigation

    Adaptive Height : enables adaptive height for single slide horizontal carousels

    Autoplay : enables autoplay mode (enabled by default)
    Speed : autoplay speed in milliseconds

    Center Mode : Enables centered view with partial prev/next slides
    Padding : Side padding when in center mode

    Transition : the animation effect used when moving to the next slide
    Speed : the speed of the animation when transitioning to the next slide

    Show Dots : enable or disable dots under the slider
    Color : the color of the dots

    Show Arrows : enable or disable arrows on each side of the slider
    Color : the color of the arrows

Google Reviews & Custom Reviews Stack Settings

  • API Settings
    API Settings
    API Key : enter your API Key from the Google Cloud Console
    Place ID : enter the Place ID for the review location
    Use Cache : cache reviews to limit hits to the Places API
    Cache Time : the time in hours that reviews will be cached locally
    Timezone : set your timezone
    Cache Folder : the name of a writeable folder on your server. The folder will be created if it doesn't already exist
    Show info in browser console : enable this during development so that any API errors get output to the browser console
  • General Styles
    General Styles
    Review style : choose the review style
    Num. Reviews : set the number of reviews to display
    Min. Rating : set the minimum review rating to filters out reviews with a low rating
    Text Limit : limit the number of characters to prevent really long reviews
  • Responsive Settings
    Responsive Settings
    Hide this stack : hide the stack on different screen sizes
    Medium : set the breakpoint for medium screens
    Large : set the breakpoint for large screens
    X-Large : set the breakpoint for extra large screens
  • Responsive Settings (Small, Medium, Large, X-Large)
    Responsive Settings (Small)
    Small : choose how many columns to display on each screen size
    Outer Margin : set a margin around the outside of the reviews
    Outer Padding : set the padding of the custom reviews or Google reviews stack
    Gutter : set the space between the reviews
    Inner Padding : set the padding on the inside of the reviews
  • Background
    Background Settings
    Background : set the background color of the reviews
  • Border
    Border Settings
    Border : turn the review border on or off
    Color : set the color of the review border
    Size : the the size of the review border
    Style : set the style of the review border
    Corner Radius : set the corner radius of the review
  • Shadow
    Shadow Settings
    Shadow : turn the review shadow on or off
    Color : set the color of the review shadow
    Offset : set the x & y offset of the review shadow
    Blur : set the blur of the review shadow
  • Font Style
    Font Style Settings
    Font Family : set the font family used for the reviews
    Font Size Unit : set the font size unit used for the font size settings
  • Author Style
    Author Style Settings
    Font Size : set the font size of the review author text
    Margin : set a margin around the review author text
    Padding : set padding around the review author text
    Color : set the color of the review author text
  • Date Style
    Date Style Settings
    Show Date : turn the date on or off
    Font Size : set the font size of the date text
    Margin : set a margin around the review date text
    Padding : set padding around the review date text
    Color : set the color of the review date text
  • Rating Style
    Rating Style Settings
    Rating : set the size of the review rating icons
    Margin : set a margin around the review rating icons
    Padding : set padding around the review rating icons
    Icon : choose the review rating icon
    Icon Color : set the color of the review rating icons
    Star Rating : set the default review rating used during edit and preview modes
  • Text Style
    Text Style Settings
    Font Size : set the font size of the review text
    Align : set the alignment of the review text
    Margin : set a margin around the review text
    Padding : set padding around the review text
    Color : set the color of the review text
  • Avatar
    Text Style Settings
    Size : set the size of the avatar image for each screen size
    Margin : set a margin around the avatar image
    Padding : set padding around the avatar image
  • HTML
    Custom Classes
    Custom Classes : type a space delimited list to assign custom class names

Individual Custom Review Stack Settings

  • Responsive
    Responsive Settings
    Hide this stack : Hide individual reviews depending on screen size. Useful to keep layouts symmetrical.
  • Avatar
    Avatar Settings
    Avatar : Choose one of the default images, upload your own image, or provide the link to a warehoused image.
    Image : options for Avatar
    Alt Tag : the Alt Tag for your Avatar image
  • Rating
    Rating Settings
    Icon : choose between stars or hearts
    Icon Color : sets the colors of the rating icons
    Rating : sets the review rating