Skip to content
Jonas Gossens edited this page Mar 27, 2018 · 18 revisions

Pagemaker™ Iframes

This page will help you getting started with using iframes inside the chayns® Pagemaker.

Table of Contents

  1. Explanation
  2. Configuration
  3. Differences to normal Tapps
  4. Pitfalls
  5. Widgets
  • What are pagemaker iframes?
    Pagemaker iframes are widgets or even full projects that can be inserted into an existing pagemaker tapp. You're able to use the chayns® API in those iframes and you can add as many as you want to the tapp.
  • How can I use them?
    1. As chayns® manager go to a pagemaker tapp
    2. Switch to the manager mode using the modeswitch
    3. Click the floatingButton to open the items menu
    4. Select the item with the angle brackets symbol (the iframe container will be added to the tapp)
    5. Now you can specify the source url to the resources and the height of the iframe
    6. Special case: chayns® API - If you want to use the api in the iframe click on the menu button and activate the chayns® API. The iframe will set some necessary url parameters to the url
    7. That's it! The iframe can now be seen by your users.

There are three options to configure for the iframe

  1. Height of the iframe (in px)
  2. URL (src attribute) of the iframe
  3. Use of the chayns® API (activate/deactivate)
    The activation will add some required url parameters to the source url

The pagemaker iframes got some differences compared to casual tapps.

  1. Pagemaker Iframes got the tappid another way
    You can get the tappid instead of chayns.env.site.tapp.id with chayns.env.site.tapp.parent.id.
  2. Smaller width than casual tapps (since it's inside the tapp)
    Keep in mind that the 'tapp'-class provides some distances to its surroundings. Remove the padding of the iframe for a proper design.

These are the challenges facing the usage of iframes inside the pagemaker.

  1. The iframe does not allow 'mixed content'-conflicts. chayns® sites without a ssl-certification are basically not allowed.
  2. The iframe got no autogrow functionality.
  3. The url parameters set if using the chayns® API could break external contents (e.g. facebook videos)

There is already a collection of ready-to-use samples you can add by url.

  • Sharingbar
    Social media bar to share your chayns® site directly to the platforms.
  • Google Navigator
    Simple navigator widget to direct your users and customers to the desired location. It offers a preview of the aimed map area.
  • Template
    If you want to build your very own widget, check out this template. It will help you setting up a project using the chayns api as a pagemaker widget.