skyslope-forms-widget v0.0.4

SkySlope Forms Widget

The Skyslope Forms Widget is a tool that lets users embed Skyslope forms into their own web applications, providing easy access to SkySlope's real estate transaction management features. It is available as a JavaScript library and can be integrated into a variety of web applications.

Demo Site: https://skyslope-widget-demo.netlify.app/

Implementation

Before starting: Please contact SkySlope Engineering to whitelist your site for framing. If using SSO, please contact SkySlope engineering to configure SSO for your company.

To implement the SkySlope Forms Widget, add the following script tags to your index.html:

<script type="module" src="https://cdn.skyslope.com/skyslope-forms-widget/latest/skyslope-forms-widget/skyslope-forms-widget.esm.js"></script>  
<script nomodule src="https://cdn.skyslope.com/skyslope-forms-widget/latest/esm/skyslope-forms-widgetcomponents.js"></script>

Then, in your app or in your index.html, add the following script:

<script>
  const init = () => window.skyslope.widget.initialize({
    idp: 'myIDP' // the idp for SSO, if using
  })
  window.skyslope?.widget ? init() : window.skyslope = { onLoad: () => init() };
</script>

Version-based implementation

If you would like to use a specific version of the widget, you can specify the version in the script tag. For example:

<script type="module" src="https://cdn.skyslope.com/skyslope-forms-widget/{version-from-package.json}/skyslope-forms-widget/skyslope-forms-widget.esm.js"></script>  
<script nomodule src="https://cdn.skyslope.com/skyslope-forms-widget/latest/{version-from-package.json}/skyslope-forms-widgetcomponents.js"></script>

No IDP Implementation

If you are not using SSO, you can initialize the widget without an IDP:

<script>
  const init = () => window.skyslope.widget.initialize();
  window.skyslope?.widget ? init() : window.skyslope = { onLoad: () => init() };
</script>

Usage with Modal

The SkySlope Forms Widget provides the following API on the window.skyslope.widget object:

• openModal: opens a modal with SkySlope Forms loaded inside an iframe. This injects a modal web component into the body of the page.
• closeModal: closes the modal.
• reload: reloads the iframe.
• navigateTo(path: string): navigates to a different path within the Forms app.
• navigateToCreateTransaction: navigates to the Create Transaction page.
• navigateToCreateListing: navigates to the Create Listing page.
• navigateToBrowseLibraries: navigates to the Browse Libraries page.

• navigateToViewAllFiles: navigates to the View All Files page.

The modal is configurable through the openModal function. For example:

window.skyslope.widget.openModal({
  open: true,
  roundedEdges: true,
  shouldConstrainMaxWidth: true,
  showHeaderButtons: true,
  showOverlay: true,
  styleOverrides: {
    modalWrapper: {
      backgroundColor: 'black',
      color: 'white',
    },
    modalHeader: {},
    modalOverlay: {},
    modalContent: {},
    maxWidthContainer: {},
  },
});

Custom Usage with Inline Container

If you do not want to open a modal in your app and would instead like to customize the placement of the widget, follow the instructions below:

To use the inline component instead of the openModal() function, you will need to add the following ss-container-inline web component to your HTML:

<ss-container-inline style="height: 1000px; /*... add any other styling here*/"/>

Add the openInline: true option to the initialize() function, as shown below:

const init = () => window.skyslope.widget.initialize({
  idp: 'myIdp', // the idp for SSO
  openInline: true
})

This will display the Skyslope Forms widget within your application, without opening a modal.

Additionally, all navigation and refresh functions work as expected.

Pre-made buttons

There are four pre-made button web components that you can use to interact with the Skyslope Forms widget:
By using these pre-made buttons, you can easily integrate Skyslope Forms functionality into your application without having to build your own UI components.

• <ss-button-create-listing>: Opens the "Create Listing" page when clicked.
• <ss-button-write-offer>: Opens the "Create Transaction" page when clicked.
• <ss-button-browse-libraries>: Opens the "Browse Libraries" page when clicked.
• <ss-button-view-all-files>: Opens the "View All Files" page when clicked.

To use these buttons, you can add them anywhere in your HTML like so:

<ss-button-create-listing id="create-listing-btn">Write a Listing</ss-button-create-listing>
<ss-button-write-offer id="write-offer-btn">Write an Offer</ss-button-write-offer>
<ss-button-browse-libraries id="browse-libraries-btn">Browse Libraries</ss-button-browse-libraries>
<ss-button-view-all-files id="view-all-files-btn">View All Files</ss-button-view-all-files>

Unstyled Prop

The unstyled prop is an optional prop that can be passed to the button web components. When this prop is set to true, the button will be rendered without any default styles applied. This allows developers to fully customize the appearance of the button using their own CSS styles.

For example, to create a custom styled ss-button-create-listing component, you could define the following CSS rules:

.custom-button {
  background-color: blue;
  color: white;
  border-radius: 5px;
  padding: 10px;
  font-size: 16px;
}

.custom-button:hover {
  background-color: darkblue;
}

Then, in your HTML, you can use the ss-button-create-listing component with the unstyled prop set to true and the class attribute set to custom-button:

<ss-button-create-listing id="create-listing-btn" unstyled="true" class="custom-button">Write a Listing</ss-button-create-listing>

This will render a blue button with white text and rounded corners, with the custom styles applied. When the button is hovered over, it will turn dark blue.