Next Walkthrough


Walkthrough 1: Embedding HotDocs in a Web Page

Prerequisites:

  1. A Visual Studio web development environment
  2. A HotDocs Cloud Services subscription ID and signing key

Instructions:

  1. Create an empty ASP.NET project called EmploymentAgreement.



  2. Download the files HotDocs.Cloud.Client.dll, HotDocs.Sdk.Server.Contracts.dll, and EmploymentAgreement.hdpkg into the project directory.



  3. Add references to HotDocs.Cloud.Client.dll and HotDocs.Sdk.Server.Contracts.dll to the project.



  4. Add a new Default.aspx web page to the project.



  5. Add the following two required scripts to Default.aspx. 
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="EmploymentAgreement.Default" %>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/javascript" src="http://files.hotdocs.ws/download/easyXDM.min.js"></script>
    <script type="text/javascript" src="http://files.hotdocs.ws/download/hotdocs.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>
  6. Add some text to Default.aspx, and add id and style attributes to the div. 
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="EmploymentAgreement.Default" %>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://files.hotdocs.ws/download/easyXDM.min.js"></script>
    <script type="text/javascript" src="http://files.hotdocs.ws/download/hotdocs.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <h1>Employment Agreement Generator</h1>
    <div id="interview" style="width:100%; height:600px; border:1px solid black">
    
    </div>
    </form>
</body>
</html>
  7. Add an onload attribute that will call HD$.CreateInterviewFrame, passing in the ID of the div in which the frame should be created, and a session ID provided by the web app.
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="EmploymentAgreement.Default" %>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://files.hotdocs.ws/download/easyXDM.min.js"></script>
    <script type="text/javascript" src="http://files.hotdocs.ws/download/hotdocs.js"></script>
</head>
<body onload="HD$.CreateInterviewFrame('interview', '<%= GetSessionID() %>');">
    <form id="form1" runat="server">
    <h1>Employment Agreement Generator</h1>
    <div id="interview" style="width:100%; height:600px; border:1px solid black">
    
    </div>
    </form>
</body>
</html>
  8. Add a using directive to Default.aspx.cs, and add the following method.  Substitute your own subscription ID and signing key for SUBSCRIPTION_ID and SIGNING_KEY.  The method creates a RestClient object and calls CreateSession, passing in an arbitrary name for our template package and a local path to the package.
    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using HotDocs.Cloud.Client;
    
namespace EmploymentAgreement
{
    public partial class Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
    
        }
    
        protected string GetSessionID()
        {
            var client = new RestClient("SUBSCRIPTION_ID", "SIGNING_KEY");
            return client.CreateSession("Employment Agreement", Server.MapPath("~/EmploymentAgreement.hdpkg"));
        }
    }
}
  9. Build and run the web app.  The web site should have an embedded HotDocs interview which assembles the document upon completion.



This project will serve as the basis for the subsequent walkthroughs, which will demonstrate various ways to customize the embedded HotDocs session.

Next Walkthrough