COVID-19 has forced thousands of employees across the United States—from local coffee shops to Apple and Salesforce—to work from home in order to help contain the pandemic. 

Think about that for a second. Millions of people who typically work at their desks in the office are now working from their couches at home. Businesses that never managed a single remote employee now must manage their entire company remotely. It’s a huge challenge. 

One of the biggest challenges is hiring and onboarding employees 100% remotely. 

Normally, when you think about onboarding a new hire, you envision someone showing them to their desk, helping them fill out forms, setting up their work computer, and so on. But how do you do all that from your home office? How are you supposed to remotely verify someone’s I-9? Or remotely set up and ship their work computer? Or remotely add them to all of the apps they need, like Slack, Office 365, and GSuite? 

In this handbook, you’ll find the answers to these questions and many more. Read on to learn everything you need to know about onboarding new hires 100% remotely.

HOW TO: Remotely manage offer letters and agreements

The Problem:

The worst part of onboarding is the paperwork. So much paperwork. Here are just a few onboarding documents that nearly every company has to manage: 

And every time you hire someone new, the cycle starts again: create the paperwork, send the paperwork, collect the paperwork, manually enter all of the data from the paperwork, and finally store the paperwork.

It’s enough to make you pull your hair out. 

And the problem is even worse for remote employees because you can’t drop off and collect their paperwork in-person. You either have to mail their paperwork or manually coordinate via email.

The Solution:

Modern HR systems like Rippling allow you to automatically create and digitally send (via email) all of the documents you need new hires to fill out and sign. 

Hiring managers just enter some basic hiring info—like their title, salary, and start date—and the system instantly generates all of their paperwork for review and e-signature. It also allows you to see who signed what, when.

Alternatively, you can use standalone electronic signature software like DocuSign or Adobe Sign. But they can’t integrate with your core HR system, which means you’ll have to create, send, and manage employees’ documents in a completely separate system from where you manage all of your other employee information.

HOW TO: Remotely verify I-9s

The Problem:

Nearly all the i’s can be dotted and t’s can be crossed digitally these days—but there is one big exception: I-9 Employment Verification

Federal law requires all U.S. employers to complete an I-9 form within three days of a new hire’s start date and certify an employee’s identification and work eligibility documents in person

The Solution:

On March 20, 2020 ICE released a statement announcing that the Department of Homeland Security (DHS) will temporarily allow employers with employees working remotely due to COVID-19 to defer the physical review of Employment Eligibility Verification (Form I-9).

PLEASE NOTE: This temporary provision only applies to employers that are operating remotely. If there are employees physically present at a work location, their I-9s must still be inspected in person.

How the temporary deferment works:

Modern HR systems like Rippling can automate much of this work by requiring employees to upload a picture of their eligibility documentation during onboarding, and automatically assigning tasks to managers (and emailing reminders) to review them within 3 days.

What happens after the deferment ends?

Once ICE’s deferment ends, you can remotely verify employees’ I-9s by assigning an Authorized Representative to visit the employee at their home, view their completed I-9, and physically inspect their eligibility documents.

An Authorized Representative is anyone you trust to review and confirm their documentation in-person. While you can technically assign anyone, you’re still legally liable if they incorrectly confirm a new hires’ information. So make sure to train whoever you assign or confirm in advance that they know how to properly review I-9 documents.

Here are a few possible solutions that might work for you.

1. Remote Notaries. If you Google “remote notary near me”, you can find and book a local notary to visit the employee at home. A formal notary seal does not need to be (and should not be) applied.

2. Co-Workers: If another employee lives close to the new hire, they can visit them and verify their documents (or vice versa).

3. Friends or Family: If you have a trusted friend or family member who lives close to the new hire, they too can visit them and verify their documents.

HOW TO: Remotely upkeep payroll

The Problem:

Fortunately, most payroll systems nowadays can be managed online. That said, there are a few advantages to using a newer, more modern payroll system like Rippling or Zenefits rather than a legacy system like ADP or Intuit. 

The Solution:

Modern payroll systems can integrate with your 3rd party systems — like your 401(k), insurance carriers, time and attendance software, and more — so no one has to enter any data in order to run payroll. By eliminating payroll data entry across every department, you eliminate the need to coordinate with people to run payroll, regardless of whether they’re in the office or at home.

HOW TO: Remotely enroll employees in benefits

The Problem:

Most businesses still use offline processes to enroll new hires in some (or all) of their benefits — medical, dental, vision, 401(k), commuter, life, disability, and so on.

Offline enrollments usually look like this:

The whole process reads like an Abbott & Costello skit. It’s inefficient, prone to error, and becomes even harder when your employees aren’t in the office because you (or your broker) will either have to mail their forms or coordinate manually via email.

The Solution:

Modern HR systems like Rippling allow you to enroll new hires in all of your benefits, all online and in one place. If you already have a broker, they can also use the system to manage your employees’ benefits—whether they’re on-site or remote.

Alternatively, you can ask your broker to implement a standalone system like Ease or Employee Navigator, though they require more manual data entry since they aren’t built into your core HR system.

HOW TO: Remotely manage employees’ computers 

The Problem:

When Zendesk hired their first marketing executive, she showed up on her first day to discover nobody had thought to get her a laptop. CEO Mikkel Svane recalls in his book Startupland that he had to run out to the Apple store and buy one. But what if their CMO worked from a different location? She would’ve had to go buy a laptop on her own, or wait several days for one to be delivered — missing critical time she needed to get up to speed. 

Fortunately, there’s a better way to manage your employees’ devices now.

The Solution:

Rippling Device Management Software allows you to remotely manage employees’ devices right from your core HR system. When you hire and onboard a new employee, you can easily buy, set up, secure, and ship any device — from their computer to monitor — right to their home.

And if someone loses their laptop or leaves the company, you remotely lock it, wipe it, and re-assign it to another employee.

Alternatively, you can use a standalone mobile device management (MDM) solution like JAMF or Manage Engine but they typically require a dedicated IT team to help set up and manage.

HOW TO: Remotely add new hires to every app they need

The Problem:

The average company uses well over 20 cloud apps and systems. And odds are your new hire will need (and want) access to many of them. In particular, remote employees need access to communication and coordination apps right away — think Office 365, Slack, Zoom, Loom, Dropbox, and Asana.

For new hires, getting access to all the tools and systems they need to start working is one of the most tedious parts of joining a new company. And it’s even more frustrating when they’re remote. They can’t just walk over to someone to get help. So what do they do?

The Solution:

Rippling is the only HR software that allows you to remotely provision new employees’ apps in one-click — with or without a dedicated IT team.

For example, you can create a new employee’s Slack account and add them to #slack channels. You can create their GSuite account and work email. If it’s a salesperson, you can create their Salesforce account. 

Alternatively, you can use a standalone identity management (IDM) solution like Okta or OneLogin into provision apps. Note that they require a dedicated IT team to set up and manage this software.

HOW TO: Remotely manage passwords

The Problem:

Employees (and human beings in general) are notoriously bad at sharing passwords. That’s because more often than not, people take the path of least resistance. 

When everyone’s in the office, people tend to share passwords in-person or on post-it notes. And when everyone’s out of the office, it gets even worse. That’s when people share their passwords over non-secure channels like email and Slack.

The Solution:

Rippling is the only HR system that comes with a password manager built-in. It’s called RPass and it’s the first password manager built for team password sharing. Employees can securely share their login credentials with specific people or whole departments, right from their Chrome browser window.

Alternatively, you can use 1Password and LastPass — both of which integrate directly with Rippling.

HOW TO: Remotely welcome new hires with swag

The Problem:

Some companies — especially tech companies — like to make employees feel welcome by welcoming them with corporate swag: a company t-shirt, backpack, and other fun stuff. 

But how do you welcome new hires with swag when every new hire is working from home?  

The Solution:

Rippling is the only HR system that integrates with corporate swag apps like SwagUp, which allow you to order and ship individual swag bags to new employees. 

You can still use apps like SwagUp and Social Imprints without Rippling to help manage your swag, but it requires a bit more work, because they aren’t integrated with your core HR system so the sends can’t be automatically triggered.

HOW TO: Remotely assign and manage tasks

The Problem:

Onboarding employees is a team sport. Every department needs to do something to set up a new employee. HR needs to prorate their first check. IT needs to ship their laptop. Finance needs to add them to the expense system. The list goes on and on. It’s hard enough to coordinate this cross-departmental dance in-person, let alone remotely.

The Solution:

Modern HR systems like Rippling and BambooHR allow you to automatically create and assign tasks to managers and new hires across every department, whenever someone new joins.

Alternatively, you can use a standalone task management app like Asana or Trello to help manage everyone’s tasks. But again, they don’t integrate with your core HR system, so they require a bit more work to manage.

HOW TO: Remotely collaborate and build culture

The Problem:

It can be tough to build trust with new hires and make them feel invested in the company when all of their relationships are virtual. One study of 1,100 remote employees found that they are much more likely to feel left out, mistreated, and ignored. 

The Solution:

Given that dynamic, it’s critical to build a strong collaborative environment so remote workers feel connected, supported, and engaged. Here’s how you can help make employees successful on their first day and every day after that.

Act now. Don’t wait to future-proof your company.

COVID has forced businesses across the world to acknowledge an uncomfortable truth: They simply can’t manage remote employees well using their legacy systems and processes. Fortunately, if you just follow this guide, you’ll be able to onboard anyone, anywhere, without missing a beat.

And if you want to go more in-depth into the ins-and-outs of onboarding employees remotely, be sure to register for our upcoming webinar: How to Onboard and Hire Remote Employees During COVID-19.

What to select between DraftJs, SlateJs, and existing WSYWIG editor Froala?

We had to create editors for two different use cases almost polar opposite in number of features they have. One was a simple editor to post status and the other was document editor for templating business agreements.

Status Post Editor ✍️

At Rippling, we use React for creating almost all our user interfaces. We wanted to create a simple interface where people could share their status. We also wanted ability to add rich text and mention other people in our status post editor. So we decided to go with building an editor component of our own instead of using a textarea.

We explored DraftJs and SlateJs. Both are very well maintained and leading projects in React Ecosystem.

DraftJS vs SlateJS

  1. Plugin System:
    You will have to use DraftJs plugins along with DraftJs to be able to create and re-use plugins. There is no plugin system in DraftJs itself. On the other hand, SlateJs has first class plugins system.
  2. Nested Structures:
    There’s no good way to implement tables right now in DraftJs.
    DraftJs’s content model is flat. That’s a restriction that comes with it’s own pros and cons. Nested structures are harder to optimise and reason about, so this makes maintaining DraftJs easier. However, this restriction means that implementing a table layout is hard to do without nesting editors. Nested editors, although doable and probably the best way to implement table functionality in DraftJs right now, comes with a bunch of extra complexity, try to stay away from this if you can.
    There is an ongoing effort to implement a tree structure in DraftJs but we have no idea as to when this feature will actually land.

    — you can read more here

    Slate Js has schema less content model so you can create nested structures like tables, nested lists without nesting editors.

  3. Immutable data structures
    Both use immutable data structures to store editor state.
  4. Serializing to HTML
    Immutable data Structure is great for managing editor state. But your editor needs to consume HTML and/or spit HTML. Since HTML is used by other systems, interfaces. So serializing and de-serializing to HTML is important.
    Slate Js has inbuilt plugins and doc to help with this. However, with DraftJs you would have to rely on third party lib or write your own serializer/de-serializer.

For creating a simple post editor you can use either Slate or DraftJs + Plugins. We went ahead with DraftJs + Plugins-Editor.

Below is the gist of how you can start with DraftJs plugins to create a post editor and get html out on submit.

class PostEditor extends Component {
constructor(props) {
super(props);
this.mentionPlugin = createMentionPlugin({
entityMutability: "IMMUTABLE",
mentionComponent: MentionComponent // since we want to remove the entire name at once.
});
this.state = {
editorState: EditorState.createEmpty(),
suggestions: this.props.mentions
};
}
reset = () => {
this.setState({
editorState: EditorState.createEmpty()
});
};
onChange = editorState => {
this.setState({
editorState
});
};
onSearchChange = ({ value }) => {
this.setState({
suggestions: defaultSuggestionsFilter(value, this.props.mentions)
});
};
keyBindingFn = e => {
// retrun custom commands on keyPress if required
return getDefaultKeyBinding(e);
};
toHtml = () => {
const contentState = this.state.editorState.getCurrentContent();
const options = {
// eslint-disable-next-line consistent-return
entityStyleFn: entity => {
const entityType = entity.get("type").toLowerCase();
if (entityType === "mention") {
const data = entity.getData();
return {
element: "span",
attributes: {
"data-mention-id": _.get(data, "mention.id"),
class: "mention_class"
},
style: {
// Put styles here...
}
};
}
}
};
return stateToHTML(contentState, options);
};
handleKeyCommand = command => {
// handle custom command here;
const newState = RichUtils.handleKeyCommand(
this.state.editorState,
command
);
if (newState) {
this.onChange(newState);
return cmdState.handled;
}
return cmdState.notHandled;
};
render() {
const { MentionSuggestions } = this.mentionPlugin;
const plugins = [this.mentionPlugin];
const { className, style, placeholder } = this.props;
return (
<div className={`editor ${className}`} style={style}>
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
plugins={plugins}
keyBindingFn={this.keyBindingFn}
handleKeyCommand={this.handleKeyCommand}
placeholder={placeholder}
ref={element => {
this.editor = element;
}}
/>
<MentionSuggestions
onSearchChange={this.onSearchChange}
suggestions={this.state.suggestions}
entryComponent={EntryComponent}
/>
</div>
);
}
}
PostEditor.propTypes = {
/**
* mentions {array} - array of names for `@`mentions to work
*/
mentions: PropTypes.arrayOf(
PropTypes.shape({
name: PropTypes.string,
id: PropTypes.string
})
),
/**
* className {string} - className applied to top most Wrapper
*/
className: PropTypes.string,
/**
* style {object} - inline style to be applied to top most Wrapper
*/
style: PropTypes.object,
/**
* placeholder {string} - placeholder to display when editor has no text
*/
placeholder: PropTypes.string
};
PostEditor.defaultProps = {
mentions: []
};
view raw PostEditor.js hosted with ❤ by GitHub

Working example in the sandbox below.

Building a document editor in React application ✍️

We had to replace our existing Summernote based editor because we were facing a lot customer issues while pasting documents, creating tables and placing images.

We wanted to create a trimmed down version of Google docs, so that our users can create document templates using the editor in our apps itself.

First, we tried SlateJs and using DraftJs plugins the main problem was that we would have to build the whole editor by scratch.
You can see the above trimmed down version of post editor has only one notable feature that is mention. However, building that with even with existing plugin took a lot of boilerplate code.

Essentially, these two libraries SlateJs and DraftJs give you a content editable textarea and a framework around that for you to build your own editor.

Also, Learning curve is significant with both of these frameworks. If you want to develop an editor which is not as limited as the above post editor you would need a good grasp of there API, concepts like immutability of editor state, entities, decorators etc.

Don’t believe me, check it here SlateDocs or DraftJSDocs.

Slate JS docs are way better and straight forward compared to Draft Js.

These are “Frameworks to build editors” and not editors themselves.

As any early stage startup, we do not have the luxury to spend a lot of time/resources building an entire document editor by scratch. So we decided to reuse an existing WYSIWYG editor as our base component and create a wrapper over that to add custom features.

Now, the difficult part selecting the right WYSWIG Editor.

There are a lot of editors to choose from some are paid some free. Some created using DraftJs/SlateJs and a lot of them are using jQuery/Vanilla JS. They also tend to differ in features and API.

To decide on one we first made a list of what we are exactly looking from the editor. We created a list of tests to shortlist the editor we would use based on the pain points we had with Summernote.

  1. Paste an existing document from Google docs/Microsoft Word to check how they handle HTML paste processing. This was very important to us. Since we were creating a document editor inside our app. Most of our clients would paste their existing created documents from Google docs/Microsoft Word. It was necessary that the new editor handles HTML paste in at-least an acceptable way or else we would have to again tap in the `after paste hook` and add a lot the HTML paste processing logic ourselves. So we took a document where we had nested lists, table and an image with a lot of text. After Pasting, we checked whether Text Formatting and indentation was preserved. List and Nested Lists were treated as list and nested lists. You can test it like this in the UI without even opening dev tools. Suppose you have 3 ordered lists 1, 2 and 3. and then you press enter at the end of 3 it should automatically add 4. This indicates it has properly parsed your HTML list correctly. Similarly, you can test with nested lists.
  2. It should parse the existing table correctly and have basic table/cell editing features, also it should handle tabbing in tables cells.
  3. Image insertion and editing capabilities.

One Editor stood out and met most of the above tests Froala.

Even though it was NOT an open source or free to use Editor.

It is an excellent editor which is very well maintained, has rich and extensive API with reasonably good documentation.

Also if like us if you want to build a document editor Froala has a special mode called “Document Mode”.
Check out Froala docs. They also have a React integration to get you started.

This is how you can create a wrapper around Froala using React-froala and get started.

Yes, Below example is using React hooks. ???

const EditorComponent = forwardRef(({ defaultContent }, ref) => {
// State
const [state, setState] = useReducer(
(prevState, nextState) => ({
...prevState,
...nextState
}),
{
content: defaultContent || ""
}
);
const editor = useRef({});
const initializeEditor = (e, editorRef) => {
editor.current = editorRef;
window.editor = editorRef;
};
useImperativeHandle(ref, () => ({
getContent
}));
const getContent = () => {
return editor.current.html.get();
};
const editorConfig = {
placeholder: "Edit Me",
documentReady: true,
events: {
"froalaEditor.initialized": initializeEditor
}
};
const onContentChange = model => {
this.setState({
content: model
});
};
return (
<div className="main-editor-container">
<FroalaEditor
config={editorConfig}
tag="textarea"
model={state.content}
onModelChange={onContentChange}
/>
</div>
);
});
view raw FroalaEditor.js hosted with ❤ by GitHub

Click on image to open sample Froala sandbox

Conclusion

If you have a limited use-case like chat-box, post editor, comment widget or the likes. DraftJs plugins Editor is the way to go. Most of the plugins (at least the official ones) are created I guess keeping these use-cases in mind. You will find emoji plugin, mention, link etc.

If you have a Content Management System like Medium or GitBook to make, you would ideally want to create your own editor from scratch. I would prefer SlateJs any day over DraftJs for this. You get all the good parts of DraftJs without any of it’s limitations. Read “Why SlateJs?” here.

If you want to ship your WSYWIG editor fast and you do not have resources in writing an WSYWIG editor from scratch, use an existing editor like Froala.