menu
Product expand_more

Comments

Get the conversation started & increase engagement

Code-Bin (CMS)

DIY CMS with support for HTML, CSS and JS

Community feed

Invite your user to engage in your very own community

Sites

Single page applications in minutes

E-Commerse

Connect Stackend to your Shopify store

Reviews

Increase sales and engagement

Login & profile

User profiles that attach to posts and provide

Admin

To keep you sleeping well at night

Stackend NPM packages

Customize your own frontend

DocsNewsAboutPrice
Sign in
  • GETTING STARTED
  • Installing Stackend
  • Try it on CodePen
  • STYLING
  • Custom CSS
  • Style settings in admin
  • ADVANCED
  • Javascript events
  • Client side API
  • MODULES
  • Comments
  • Code Bin
  • Feed
  • Login
  • Page
  • Product
  • Profile
  • Shop Collection
  • Site
  • Slideshow
  • Throbber

    • Modules

    Stackend modules are small pieces of code that provide additional functionality for your site.

    Stackend will process any elements on your page that has a recognized data-stackend-type attribute. They will typically look something like:

    <div data-stackend-type="stackend-cms" data-stackend-id="123:456"/>

    Some modules have additional parameters controlling the behaviour and appearance.

    These are the supported modules:

    Comments

    Displays a list of comments and allows users post a comment.

    The comments are associated with the url where the module is included. If you use more than one comment module the parameter data-reference-id needs to be set in order to separate the modules.

    Attributes

    data-stackend-type
    "stackend-comment" - The module type. Required.
    data-stackend-id
    The community and module id using the format XXX:YYY. Required.
    data-reference-id
    Optional id used to get a specific set of comments. In most cases the id will be automatically calculated from the url where the module is used. However, if you use more than one comment module on the same url you will need to set this id. The value can be any positive integer.

    Code Bin

    Display a chunk of HTML. The Code Bin may include html, css and javascript.

    Attributes

    data-stackend-type
    "stackend-cms" - The module type. Required.
    data-stackend-id
    The community and module id using the format XXX:YYY. Required.

    Feed

    Display a list of feed entries.

    May also allow the users to create new post, if the rules of the feed allow for that.

    Attributes

    data-stackend-type
    "stackend-feed" - The module type. Required.
    data-stackend-id
    The community and module id using the format XXX:YYY. Required.

    Login

    Displays a login button if the user is not currently logged in.

    When logged in it displays the user profile image. Clicking the image will open a menu with options to view the profile, log out etc.

    This module is automatically added to the start of the page. There is no need to add the module unless it needs to be in a specific part of the page DOM.

    Attributes

    data-stackend-type
    "stackend-login" - The module type. Required.
    data-stackend-id
    The community id using the format XXX. Required.

    Page

    Displays a number of Code Bin boxes

    Attributes

    data-stackend-type
    "stackend-page" - The module type. Required.
    data-stackend-id
    The community and module id using the format XXX:YYY. Required.

    Profile

    Displays the profile of a selected user

    This module is automatically added to the start of the page. There is no need to add the module unless it needs to be in a specific part of the page DOM.

    Attributes

    data-stackend-type
    "stackend-profile" - The module type. Required.
    data-stackend-id
    The community id using the format XXX. Required.

    Site

    Displays a selected set of pages and a menu allowing the user to navigate the pages.

    Navigation happens within the element, much like an iframe.

    Attributes

    data-stackend-type
    "stackend-site" - The module type. Required.
    data-stackend-id
    The community and module id using the format XXX:YYY. Required.
    data-stackend-menu
    Controls menu visibility and layout. Accepts: vertical, horizontal and false Default: vertical

    Slideshow

    Displays a slideshow.

    The slideshow should contain a number of CMS boxes, one for each slide

    Attributes

    data-stackend-type
    "stackend-slideshow" - The module type. Required.
    data-stackend-id
    The community id using the format XXX. Required.
    data-stackend-animation-time
    Duration of the slide change animation in ms. Default: 350
    data-stackend-arrows
    Display arrows allowing the user to navigate between the slides. Default: true
    data-stackend-auto-play
    Should the slideshow start automatically? Default: true
    data-stackend-delay
    Delay between slides in ms. Default: 3000
    data-stackend-indicators
    Display a number of dots for quick navigation of the slides. Default: false

    Examples

    <div data-stackend-id="123" data-stackend-type="stackend-slideshow" data-stackend-indicators="true">
  <div data-stackend-type="stackend-cms" data-stackend-id="123:456"/>
  <div data-stackend-type="stackend-cms" data-stackend-id="123:567"/>
</div>

    Throbber

    Contains the trobber used to indicate that the app is loading data in the background and the modal throbber that temporarily stops user interaction while posting data.

    This module is automatically added to the start of the page. There is no need to add the module unless it needs to be in a specific part of the page DOM.

    Attributes

    data-stackend-type
    "stackend-throbber" - The module type. Required.
    data-stackend-id
    The community id using the format XXX. Required.

    Product

    Displays a product from the shop.

    Attributes

    data-stackend-type
    "stackend-shop-product" - The module type. Required.
    data-stackend-id
    The community id using the format XXX. Required.
    data-stackend-handle
    Product handle. Required
    data-stackend-layout
    "full" - Displays a large image, the complete description and options to select variant.
    "compact" - Displays reduced product information and a small image.

    Product collection

    Displays a collection of products from the shop.

    Attributes

    data-stackend-type
    "stackend-shop-collection" - The module type. Required.
    data-stackend-id
    The community id using the format XXX. Required.
    data-stackend-handle
    Collection handle. Required
    data-stackend-layout
    "list" - Display products as a list.
    "slideshow" - Display products as a slideshow. Optional