```
Then, in your app or in your index.html, add the following script:
```javascript
```
Web components from the @skyslope/forms-widget package can now be used in your application. For example:
```html
Write a Listing
```
#### Implementing a specific version of the widget via CDN
If you would like to use a specific version of the widget, you can specify the version in the script tag. For example:
```javascript
```
### Non SSO Implementation
If you are not using SSO, you can initialize the widget without an IDP:
```javascript
```
## Usage with Modal
A pre-made modal is available for use with the widget. To open the modal, call the openModal function:
```javascript
window.skyslope.widget.openModal();
```
or with arguments, as shown below:
```javascript
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:
First, add the `openInline: true` option to the initialize() function, as shown below:
```javascript
const init = () =>
window.skyslope.widget.initialize({
openInline: true,
});
```
This parameter will instruct the widget to avoid opening a modal and instead render the widget inline. You can also optionally pass the `headerVariant: 'focused'` parameter, which controls hiding navigation & settings elements in the header of any `file-details` page in Forms and the Build UI in DigiSign:
```javascript
const init = () =>
window.skyslope.widget.initialize({
openInline: true,
headerVariant: 'focused',
});
```
Next, you will need to add the following ss-container-inline web component to your HTML or JSX:
```html
```
The widget will be rendered inside the ss-container-inline web component. The ss-container-inline web component can be styled as desired.
To interact programmatically with the ss-container-inline component, see [API for custom implementations](#api-for-custom-implementations).
## Pre-made buttons
There are pre-made button web components that you can use to interact with the Forms widget:
```javascript
```
By using these pre-made buttons, you can easily integrate SkySlope Forms functionality into your application without having to build your own UI components.
`` opens the "Create Listing" page when clicked.
`` opens the "Create Transaction" page when clicked.
`` Starts a Buyer Agreement.
`` opens the "Browse Libraries" page when clicked.
`` opens the "View All Files" page when clicked.
To use these buttons, you can add them anywhere in your HTML like so:
```javascript
Write a ListingWrite an OfferBuyer AgreementBrowse LibrariesView All Files
```
Write a ListingWrite an OfferBuyer AgreementBrowse LibrariesView All Files
You can also customize the way the modal is displayed by adding a custom function and assigning one of the three available props:
`roundedEdges: false`
`showOverlay: false`
`showHeaderButtons: false`
```javascript
function openSquare() {
window.skyslope.widget.openModal({
roundedEdges: false,
});
}
```
For the fourth option, you can add all three and include an override for the modal style to position it manually:
```javascript
window.skyslope.widget.openModal({
roundedEdges: false,
showHeaderButtons: false,
showOverlay: false,
styleOverrides: {
modalWrapper: {
top: '70px',
left: '300px',
right: 0,
bottom: 0,
zIndex: 9,
},
modalHeader: {},
modalOverlay: {},
modalContent: {
boxShadow: 'none',
margin: 0,
height: '100%',
width: 'calc(100%-300px)',
border: '1px solid #e1e7f1',
},
maxWidthContainer: {
maxWidth: '100%',
},
},
});
```
### 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:
```css
.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:
```html
Write a 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.
Write a ListingOffer Time!SkySlope Forms
## Pre-made widget
Additionally, if you would like to skip the custom styling and would just like a quick all-in-one solution, we have a pre-made widget available to use.
To use the widget, you can add it anywhere in your HTML like so:
```html
```
This will result in the contained widget being rendered:
## API for custom implementations
The SkySlope Forms Widget provides the following API on the `window.skyslope.widget` object.
All of these functions are used internally by the web-components and are exposed for use in custom implementations.
`openModal` opens a modal with SkySlope Forms loaded inside an iframe. This injects a modal [web component](https://developer.mozilla.org/en-US/docs/Web/Web_Components) into the body of the page.
`closeModal` closes the modal.
`reload` reloads the widgets internal iframe.
`navigateTo(path: string)` navigates to a different path within the Forms app.
`navigateToCreateTransaction` navigates to the Create Transaction page. Returns newly created ID for data fetching. See section on [Listening for Events](#listening-for-events).
`navigateToCreateListing` navigates to the Create Listing page. Returns newly created ID for data fetching. See section on [Listening for Events](#listening-for-events).
`navigateToStartBuyerAgreement`: navigates to start buyer agreement page.
`navigateToBrowseLibraries` navigates to the Browse Libraries page.
`navigateToViewAllFiles` navigates to the View All Files page.
`navigateToEnvelope(envelopeId: integer)` navigates to the Envelope Bulk Fill page.
---
### Example Usage
This query parameter can be applied to the following routes in each respective application:
#### Forms
```html
https://forms.skyslope.com/file-details/{fileId}/{route}?headerVariant=focused
```
#### DigiSign
```html
https://send.skyslope.com/envelopes/{envelopeId}?headerVariant=focused
```
## Listening for Events
Depending on the function selected, the SkySlope Forms Widget can post a message containing information relevant to further data querying. For example, after calling `navigateToCreateTransaction`:
```javascript
interface SkySlopeMessage {
status?:
| 'forms-onboarding-complete'
| 'forms-edit-contacts'
| 'forms-download-document'
| 'forms-create-file'
| 'forms-bulk-fill'
| 'forms-buyer-agreement-rename'
| 'forms-prepare-signature'
| 'digisign-prepare-for-signature';
| 'digisign-ready-to-send',
metadata?: {
fileId?: number,
formsEnvelopeId?: number,
formsDocumentIds?: number[],
digisignEnvelopeId?: string,
};
}
window.addEventListener('message', event => {
// Check if the origin of the message is from SkySlope Forms
if (event.origin == 'forms.skyslope.com') {
const data = JSON.parse(event.data);
const { metadata, status } = data;
console.log(metadata.fileId); // Returns ID of newly created transaction or listing, eg. 123
console.log(status); // 'forms-*'
}
});
```
