This article details the processes of customizing your WaaS website.
In this article
- Site Branding
- Site Integrations
- Your Domain Name
- Branding
- Home Screen and Catalog
- Advanced Access
- Styling and Behaviour
- Custom SCSS & CSS
- Custom Scripts
- Add your own Support/Help Widget
- Custom Side Menu
- Public Page Panel
- JSON Definition
- Site Integrations
- HTTPS Support (SSL Certificate)
- Configure Email for your WaaS Domain (SPF record)
- Set up API Keys for Connections
Site Branding
Setting up your own branded version of our web portal involves a few steps to get up and running.
The main configuration area for customizing your WaaS site can be found by navigating to Platform&Billing > Branding Center.
You'll find the Site Branding and Site Integration links near the top-left corner of the screen.
Site Branding & Integration options on the App Overview area are only visible if trialling or purchased WaaS.On the Site Branding page, you can enter your company site details, configure various cosmetic settings, and more. On the Site Integrations page, you can configure connections to external cloud services requiring API access.
An overview of requirements, options, customizations, and integrations are as follows:
| General Note that these are not required for previewing WaaS, but values are required. |
|
| Branding |
|
| Home Screen & Catalog |
|
| Styling & Behaviour |
|
Site Integrations
| API Access Details Not required for previewing WaaS. |
|
Now that you've got an idea of what's possible, the following steps will help you make your branded website a reality!
Your Domain Name
The first step to getting your WaaS running is to Set up a Custom Domain Name that your users will use to log into your branded site and then provide supporting details.
Branding
You should upload your logos and an icon image to override the default platform imagery.
Home Screen and Catalog
Then, if you'd like your example apps to be displayed example apps instead of ours to your clients, you can specify a repository account from which to populate the Examples Catalog.
Also, set your respective branded app URLs if you've added AaaS to your account.
Customize the Home page's links to your tutorials and common questions. This will allow your users to navigate to important information or areas quickly.
Advanced Access
If you'd like to embed the web portal into an iFrame on another website or alongside an existing iFrame onto an external service, you can do so by adding the website URL here. Please note that only one URL/Domain is currently allowed.
When whitelisting a URL, it is important to only allow URLs from trusted sources. Be sure to whitelist specific pages or domains rather than entire websites to ensure that only the desired content is embedded. Whitelisting an entire website can increase the risk of embedding unwanted or malicious content, harming your website and its users.
Styling and Behaviour
Custom SCSS & CSS
Next, customize the look and feel of your WaaS site via the Custom SCSS/CSS options. nomorePAPER supports SCSS/CSS for all WaaS styling; default SCSS/CSS describes each element that may be customized to produce the desired result.
Any element in the web portal can be styled by adding your own SCSS/CSS into the Custom SCSS/CSS area.
Using Chrome Inspector, you can get an idea of the CSS styles involved in any page in the web portal.
Take a look at articles such as the one below for some basic information on how to do this:
https://designtlc.com/use-chrome-inspector-edit-website-css/
If you aim to change specific elements and styling, you should understand SCSS/CSS. If you don't have this knowledge, we recommend getting help from a technical or web person to achieve what you're looking for.
Custom Scripts
You can also include your custom Javascript code to override your WaaS site's look and feel. Use the Custom Scripts field for this purpose—the Javascript you place into this field will be included on every page of your Website as a Service site.
For example, if you wanted to track all your admin page activity and traffic on Google Analytics, then you would put your Google Analytics Javascript tracking code in the Customs Scripts section of your website, as shown in the screenshot below:
Add your own Support/Help Widget
When WaaS is enabled, the nomorePAPER Help & Tutorials side menu button and "Need Help?" widget is not available. These links point to our branded help and support articles not desired when WaaS is enabled.
One typical use of Custom Scripts is to add your support widget into your WaaS for your chosen support/helpdesk service. When these widgets are clicked on, they'll typically pop out to let the user log tickets and browse the documentation knowledge base. Including such a widget usually means copying a snippet of Javascript from your support/helpdesk service and pasting the snippet into the Custom Scripts field.
Checkout Inline Manual
Custom Side Menu
Use this to customize the layout of the left-side menu completely. Add your custom layout using JSON code.
- You can add menu items that link to external or internal platform URLs using HTTP GET or POST.
- Links can be configured to open embedded content in the platform.
- Add new buttons and tabs.
Public Page Panel
Specify an HTML fragment that will be loaded into the side panel of the platform's public-facing pages, such as the Sign In page. This will completely replace our default 'bubbles' animation when these pages are visited under your custom WaaS domain.
Use this space to advertise new services, inform users of changes, or add style to the user experience.
JSON Definition
| CssClass | Text, Optional This will be added to the links anchor tag class attribute. These are useful to provide Javascript or CSS hooks on the link. Example Config: "CssClass": "thisIsAClass thisIsAnotherClass" |
| Icon | Text, Required Must be a valid Font Awesome 5 icon. Only Regular, Duotone, and Brands are supported. Check out Font Awesome 5 icons. Example Config: "Icon": "fa-home" |
| Title | Text, Required This is the title text of the link. Try to keep it short. Example Config: "Title": "A Link Title" |
| Link | Text, Required if Link Target is Embedded or New Window Any valid HTTP or HTTPS URL. Valid internal platform URLs: /Home, /Screens, /AppBuilder, /Catalog, /DataSources, /DocDefinitions, /Connections, /Data/Feed, /Data, /Data/Map, /Tasks, /Tasks/Calendar, /Tasks/Map, /TaskRecurring, /TaskTemplates, /Provider, /Users, /Platform, /Platform/Clients, /Platform/Environments, /BrandCenter, /RepositoryAdmin, /Billing, /Account/ChangePassword, /Account/LogOff Example Config: "Link": "https://www.google.com/" |
| LinkTarget | Text, Required The end result of clicking on the link. Default is EMBEDDED. Valid Targets: EMBEDDED, NEW_WINDOW, BUTTON Example Config: "LinkTarget": "NEW_WINDOW" |
| LinkAction | Text, Required Only used if Target is EMBEDDED or NEW_WINDOW. Default is GET. Valid Actions: GET, POST GET Performs an HTTP Get request, POST performs an HTTP POST. Example Config: "LinkAction": "POST" |
| FormPostData | JSON key-value pair, Optional Optionally add Form Post Data to an HTTP POST request. |
Example Config:
| IsBeta | Boolean, Required. Will show a BETA badge on the menu item when true. Default is false. Valid values are: true or false. Example Config: "IsBeta": "true" |
| AccessLevel | Text, Optional Only users with an access level equal to or higher than this will see this menu item. This only applies to external links. Internal Platform links have their own access levels and are not configurable. Default is ReadOnly. Valid Access Levels: ReadOnly, User, Admin, EnterpriseAdmin, VendorAdmin Example Config: "AccessLevel": "Admin" |
| Children | JSON menu obj, Optional Use to create a second level of menu items. A menu item that contains children will become a dropdown button. Only two levels are supported. |
Example Config:
Site Integrations
HTTPS Support (SSL Certificate)
For most users of the platform, a secure HTTPS connection is required.
In particular, this applies to the usage of our APIs and also any connections to Google, Microsoft, and most other external service connectors requiring an SSL certificate that our platform auto-generates for you.
Configure Email for your WaaS Domain (SPF record)
To avoid emails sent from your custom domain name being blocked, you must ensure you have an SPF record on your web domain's DNS.
Set up API Keys for Connections
Because your WaaS site runs off its web domain name, any attempts to set up Connections to Google, Microsoft, and other cloud services require you to have API access keys set up against that WaaS site domain.
Please refer to the articles provided, which provide step-by-step guides on how to set up these various API keys and services.
- Enabling Google Connections
- Enabling OneDrive Personal Connections
- Enabling Dropbox Connections
- Enabling GeoOp Connections
- Enabling Box Connections
- Enabling Egnyte Connections
- Enabling FreshDesk SSO Connections
- Enable SendGrid Connections
Work through the above steps in order, and your new custom-branded service will be ready to go in no time.