Adding Borrower Widgets to Third-Party Lender Websites

Borrower Widgets allow you to add an Encompass Consumer Connect loan application and/or borrower portal to your company's third-party (or non-Encompass Consumer Connect) website.

Borrower Widget Example: Loan Application

Loan applications submitted from a borrower widget can be viewed and managed by lenders through the Encompass Consumer Connect Admin portal just the same as loan applications submitted from an Encompass Consumer Connect site.

Borrower Widget Example: Borrower Portal

Borrowers can complete any borrower portal tasks such as eConsent, package viewing, document uploading, and so on, from the borrower portal page embedded in your site. Email notifications can be configured in the administration portal to direct borrowers to your site.

Technical Details

Borrower widgets are added to your site using a code snippet generated in the administration portal (described later in this section). A developer inserts the code snippet into a designated page on your site. The code snippet will create an iFrame on the page. The container for the loan application and borrower portal will assume 100% of the page.

Security

Some sites have security policies that forbid them from embedding external content. These sites might not display the borrower widget in the live site after your developer has pasted the code snippet into the page.

Adding a Borrower Widget to a Non-Encompass Consumer Connect Site

There are several configuration options in the administration portal that will help you add a loan application and/or borrower portal widget to your non-Encompass Consumer Connect site. These configuration options allow you to create widgets, assign a loan application workflow and loan application recipient to it, and finally generate a code snippet that your developer can add to your site.

Before You Begin

  • Make sure you have the site URL where the loan application workflow and/or the borrower portal will be located. The site URL will be the same for both the loan application and borrower portal. For example, https://<your_company_domain>.com/borrower-portal
  • Notify your developer that you will be providing a code snippet to embed into your site.

High-Level Steps

Adding a loan application or borrower portal widget to a non-Encompass Consumer Connect site involves the following high-level tasks:

Task Description
1 Create a Borrower Widget
2 Customize the Look and Feel of the Loan Application and Borrower Portal
3 Configure Administrative Settings
4 Generate the Code Snippets and Send them to Your Developer
5 Assign the Site URL to the Loan Officer in Encompass

Use the tools provided in the Encompass Consumer Connect Admin portal to create a borrower widget for your company’s site. When you create a borrower widget, you add the website where your borrower portal log in screen will be.

To create a borrower widget:

  1. In the Encompass Consumer Connect Admin portal, do one of the following:

    Click Home, then click the overflow icon (or ellipsis) and select Add widgets to your existing site.

    Or

    Click Website Builder, then click the overflow icon (or ellipsis) and select Add borrower widgets to your site.

  2. In the Borrower Widget dialog box, enter the Domain URL for your site.

    The domain URL is the location where the loan application and borrower portal log in screen will be. The URL must include your company’s domain name and page. For example,

    https://rosewoodlending/borrower-portal

    The URL you enter here will be used in email notifications to borrowers, and packages sent from Encompass will be sent from this URL

  3. Set the Default Loan App Recipient. Loan applications submitted from this widget will be sent to the loan officer you specify.

  4. Set the Encompass folder. This is where the loans submitted via Encompass Consumer Connect are saved in Encompass.

  5. Click Submit to create the borrower widget.

    After clicking Submit, the domain URL you provided is added immediately to the administration portal sites list at the top of the page and new options for the widget appear below it.

Customize the look and feel of the loan application and borrower portal to match your company’s site.

To design the loan application and borrower portal

  1. In the Encompass Consumer Connect Admin portal, click Website Builder.

  2. Click the Open Website Builder icon (). This will open the Website Builder tool so you can design your loan application and borrower portal.

  3. When the Website Builder opens, select the area you want to design. Choose either Loan Application, Loan App with Navigation, or Borrower Portal from the drop-down menu.

    When working with a non-Encompass Consumer Connect site, the Website Builder only displays options for designing the Loan Application, Loan App with Navigation, and Borrower Portal.

  4. The instructions for customizing the loan application and borrower portal for a borrower widget are the same as creating one for an Encompass Consumer Connect site.

    If you selected Loan Application, continue with the instructions outlined in Customize the Appearance of the Loan Application.

    If you selected Loan App with Navigation, continue with the instructions outlined in Customize the Appearance of the Loan Application with Navigation.

    If you selected Borrower Portal, continue with the instructions outlined in Build and Design the Borrower Portal.

  5. When you have finished customizing your loan application and borrower portal, click Publish.

Configure administrative settings for the loan application workflow and borrower portal. There are several administrative settings that are important for borrower widgets. The instructions below describe how to configure them.

The instructions in this section assume that you already have a loan application workflow created for this widget. If that is not the case, you can create or duplicate one using the steps in Set Up a Loan Application. The steps for creating a loan application workflow for a widget are largely the same as creating one for an Encompass Consumer Connect site. However, there are a couple configuration options that are useful for borrower widgets, which are described below.

Allow Borrowers to Save their Loan

You can show or hide the options that athe Create Account and LogIn buttons on the loan application widget. When the buttons are visible, borrowers can click to create a new Encompass Consumer Connect account or log in to an existing Encompass Consumer Connect account within your company site.

This option is enabled by default for borrower widgets. This option is also available to Encompass Consumer Connect workflows (non-widget workflows).

To add Create Account and LogIn buttons:

  1. In the administration portal, make sure that your new URL is visible in the site list at the top of the page.

  2. Click Loan App Workflows.

  3. Open Loan App Settings for the workflow by clicking the Edit icon .

  4. Enable the Allow borrowers to save the loan option.

    When the Allow borrowers to save the loan option is enabled, the Require borrower account creation to apply for a loan? option is displayed and can be enabled if desired.

  5. Click Save.

Check the Borrower Portal Button URL

Specify the borrower portal URL to which borrowers are directed when the Finish or Go to Borrower Portal buttons are clicked. The Specified URL field is located in the Go to Borrower Portal button configuration settings. The field is populated automatically with your borrower widget URL or Encompass Consumer Connect Borrower Portal URL. You can update it as needed. Adding Borrower Widgets to Third-Party Lender Websites on page 1

Customize Email Notifications

When using a loan application widget, be sure to customize email notifications to match your company style. Doing so will give your borrowers a more cohesive experience.

You can add your non-Encompass Consumer Connect company site URL to email notification templates. The Website {{Site.URL}} dynamic field is available for Loan Submission Email (borrower and co-borrower), Abandoned Application Email, and Loan Submission Failure Email templates.

To learn how to insert a dynamic field into an email notification, see Email Notifications.

When you are a ready to add your loan application workflow and/or borrower portal to your site, generate the code snippets and send them to your company’s site developer. Your company’s site developer will add it to the appropriate pages on your company’s site.

About Code Snippets

When working with code snippets, keep the following points in mind:

  • The code snippet is generated for the specified domain only. The code snippet will not work on any other domain.
  • The developer might want to apply the code snippet to the loan officer’s page and the Apply Now button.
  • A code snippet should be generated for each loan application recipient. To generate a code snippets for additional loan application recipients, simply click the Copy code snippet icon and enter the new recipient information. Provide any additional code snippets to your developer.
  • The code snippet specifies the domain URL and loan application recipient. If either of these values are changed or updated, the code snippet must be updated as well.
  • When a loan application is in a draft state and the domain URL has changed in the code snippet, the borrower will see a 404 error when they attempt to resume the loan application.
  • The code snippet does not need to be updated when changes are made to the loan application workflow or to the design in Website Builder.

To generate the loan application code snippet:

  1. In Encompass Consumer Connect Admin, click Website Builder.

  2. Make sure that your site URL is visible in the site list at the top of the page.

  3. Click Create a loan application workflow code snippet.

  4. Locate the loan application workflow you want to use on your site, then click the Copy code snippet icon ().

  5. Use the fields in the Generate Code Snippet dialog box to assign loan applications submitted from this widget to the appropriate loan application recipient and folder.

  6. Click Copy Code. The code is saved to the clipboard.

  7. Paste the code into an email or text editor.

    The following is an example code snippet:

    <script src='https://dev.widget.rd.elliemae.io/launcher.js'></script>

    <!-- LAR: Default -->

    <div class="em-widget"

    data-width="100%"

    data-height="800px"

    data-min-height="800px"

    data-site-id="9835434107"

    data-config='{"workFlowId":"995913","externalLoginWindow":"true"}'

    data-name="ecc-loan-app"

    data-aria-label="My Loan Application"

    >

    </div>

  8. Send the code to the site developer. If you are creating borrower portal widget as well, you might want to send the borrower portal and loan application code snippets together in the same email message.

To copy the Borrower Portal code snippet:

  1. In Encompass Consumer Connect Admin, click Website Builder.

  2. Make sure that your site URL is visible in the site list at the top of the page.

  3. Click Copy the borrower portal code snippet.

    The code is saved to the clipboard.

  4. Paste the code into an email or text editor.

    The following is an example code snippet for the borrower portal:

    <script src='https://dev.widget.rd.elliemae.io/launcher.js'></script>

    <div class="em-widget"

    data-width="100%"

    data-height="800px"

    data-min-height="800px"

    data-site-id="9835434107"

    data-config='{"externalLoginWindow":"true"}'

    data-name="ecc-borrower-portal"

    data-aria-label="Borrower Portal"

    >

    </div>

  5. Send the code to the site developer.

As a final step, make sure the site URL is assigned to the loan application recipient in Encompass.

To assign the site URL to the loan officer:

  1. Open Encompass.

  2. On the menu bar, click Encompass, and then click Settings.

  3. On the left panel, click Company/User Setup, and then click Organization/Users.

  4. In the upper panel, click to select an organization folder to which to add the user. You may need to expand the hierarchy to locate the folder.

  5. Open the user’s organization folder, select the user from the list, and then click Edit.

  6. Under Consumer Connect Site, enter your company’s website URL. If the Site URL field is not editable, you might have to clear the Use Parent check box.

    This is the URL you provided in the Encompass Consumer Connect Admin portal. For example, https://rosewoodlending/borrower-portal.