WordPress plugins integration

Overview

Because transitioning from WP to Gatsby means you lose out on some of the good / easy parts of WP, Wordsby includes the PsychicWindow component for displaying WP content using post-robot by PayPal.

How it works

Our <PyschicWindow /> component sends CSS to an iframe of our WP content via post-robot and it receives the full height of the iframe contents back. Because we have the exact height of the iframe, there are no scrollbars and the form, comments section, or other plugin bit blends seamlessly with your Gatsby site. Children of this component are for displaying a placeholder while the iframe loads.

Setup

yarn add wordsby-components

Make sure you have wordsby-admin installed and activated in WP.

Then:

1. Go to Development->Psychic Window in the WP admin area.
2. Create a post using some kind of form or other shortcode
3. Copy the url to your PsychicWindow and use it in your Gatsby project
4. Go to Development->Gatsby in the WP admin area.
5. Add your frontend url.

PsychicWindow only allows connections from your frontend url. This means that it wont work properly on localhost during development. To make it work, add define('DANGEROUS__PSYCHIC_WINDOW_DEBUG', true); to your wp-config.php during development.

React usage

import { PsychicWindow } from "wordsby-components";

<PsychicWindow url="http://wordsby.test/psychic-window/contact-form-7-example/">
  <PlaceholderComponent />
</PsychicWindow>

CSS

Pass CSS to your iframe

<PsychicWindow
  url="http://wordsby.test/psychic-window/contact-form-7-example/"
  windowCSS={`
        html {
          background: rebeccapurple;
        }
        `}
>
  <PlaceholderComponent />
</PsychicWindow>

Scroll management for long forms

You can have PsychicWindow scroll to the top of the iframe when the iframe navigates. Optionally add a pixel offset in case you have a fixed header.

<PsychicWindow
  scrollUp
  scrollUpOffset={-200}
>

Delay unveiling

If your iframe load is a little rough, for ex if you're loading a font inside your iframe, you can delay showing it in ms after it's initially loaded.

<PsychicWindow
  wait={200}
>

Callbacks

There are two callbacks, onLoad and onNavigate. onLoad is called when the iframe initially loads, onNavigate when the iframe navigates afterwards. The callback arguments are the iframe url and the iframe dom node.

In the following example the iframe navigated to a blank thank you page and gatsby then redirects to a gatsby thank you page.

onNavigate={({ url, iframe }) => {
  if (url.includes('thank-you')) {
    navigate('/thank-you')
  }
}}
onLoad={({ url, iframe }) => {
  console.log(url, iframe)
}}

Browser support

PsychicWindow's been tested in IE11, Edge, Chrome, Firefox, Safari, and Opera on macos and windows 10. If you need support for other browsers and see any bugs in them, please open an issue and I'll check it out and add a fix. I won't support anything before the latest IE11 though..

Considerations

Your form should only redirect to other psychic-window pages. Nowhere else. I would recommend just using an ajax form or redirecting to a blank /psychic-window/thank-you page and then redirecting in gatsby when that page is visited. PsychicWindow should work well in most cases but for advanced multipage forms you may run into issues.

Go to https://www.thedeckingsuperstore.com/request-a-quote/ for a live demo.