• Documentation – Constellation Client Portal

    Documentation – Constellation Client Portal

    Installation

    Manually Install the Plugin (Pro Version)

    1. Download the plugin from your My Account page (downloads tab), if you have not done so already.
    2. Within WordPress, navigate to Plugins and click “Add New”.
    3. Next, click “Upload” plugin and locate the plugin zip file that you just downloaded, and select it.
    4. Next, click “Install Now.”
    5. Lastly, click “Activate Plugin” and the plugin is ready for use and configuration.

    Upgrade from the Core version to the Pro Version

    1. Navigate to WordPress Admin -> Plugins.
    2. Locate the “Constellation Client Portal” plugin in the list (the basic version) and click “Deactivate.”
    3. Once the basic version of “Constellation Client Portal” is deactivated, install and activate Constellation Client Portal Pro by following the installation instructions above.
    Note: There is no need to uninstall the basic plugin, and your existing data will not be lost. Also, multiple versions of the Constellation Client Portal plugin (example the Basic and Pro versions) should never be active at the same time.

    Quick Start

    The steps in the Quick Start section will guide you through the initial set up of your plugin (creating a company, creating a company page, assigning a user to a company, creating an invoice and/or file and assigning it to a company), and provide the initial foundation for your client portal.

    Onboard a Company (create a new company)

    1. Navigate to Client Portal -> Companies and click “Add New”.
    2. Enter a name for the company in the post title field.
    3. Locate the “Company Home Page” section in the sidebar.
    4. Company Home Page – If you have already created a Client Page for this company, you can select it in the “Company Home Page” select field, otherwise, click the “Create New Page” button, enter a title for the page, and click “Generate Page.” This will create a new blank Client Page that you can layout and style later.
    5. Primary User – In the “Company Primary User” section, either select an existing WordPress user, or click the “Create New Primary User” button to assign a primary user for this company.
    6. Optionally, select a status for the company in the “Company Status” field.
    7. Lastly, save/publish the Company post, and the Company is now provisioned, with a home page assigned (useful if login redirection Pro feature is enabled).

    Onboard a User (assign a WordPress user to a Company)

    This section details how to assign additional users to a company (if needed), beyond the primary user that was assigned in the Onboard a Company section above.

    Prerequisite: A Company must be created before proceeding with the below steps.

    Create a New WordPress User
    1. Navigate to Users in the WordPress Admin menu and click “Add New”.
    2. Populate the standard WordPress user data (and/or the minimum data needed for your operation).
    3. Locate the “Company” field in the “Client Information” section and select a company from the list to assign the user to that company.
    4. Lastly, click “Add New User” to add the user.
    Assign an Existing WordPress User to a Company
    1. Navigate to Users in the WordPress Admin menu and locate the user to edit.
    2. Open the user’s profile and locate the “Company” field in the “Client Information” section.
    3. Select a company from the list to assign the user to that company.
    4. Lastly, click “Update User” to save the user.

    Create an Invoice and Assign It to a Company

    Prerequisite: A Company must be created before proceeding with the below steps. Pro Prerequisite: a product should be created in WooCommerce if you are intending to accept payments for this invoice via WooCommerce, and your WooCommerce store should be fully configured and ready to accept payments.
    1. Navigate to Client Invoices in the WordPress Admin menu and click “Add New”.
    2. Enter a title for the invoice (this is the title displayed to users on the front-end).
    3. Select the Invoice Status (this defaults to “unpaid”).
    4. Upload a pdf invoince in the “Upload a File” section (optional).
    5. Select a company in the “Assign Company” field.
    6. Pro Feature – Enter a due date in the “Due Date” field (optional)
    7. Pro Feature – Select a WooCommerce product in the “Invoice Product” field for the product that is associated with this invoice, if you intend to accept payments for the invoice via WooCommerce (optional).
    8. Lastly, save the invoice, and it is now ready to be displayed on pages via shortcodes.

    Create a File and assign It to a company

    Prerequisite: A Company must be created before proceeding with the below steps.
    1. Navigate to Client Files in the WordPress Admin menu and click “Add New”.
    2. Enter a title for the file (this is the title displayed to users on the front-end).
    3. Upload a file in the “Upload a File” section (optional).
    4. Select a company in the “Assign Company” field.
    5. Lastly, save the file, and it is now ready to be displayed on pages via shortcodes.

    Layout a Client Page and Add File and Invoice Lists to the Page

    1. Navigate to WordPress Admin -> Client Pages.
    2. Locate the page that you would like to edit in the list, and open it.
    3. Enter a title for the page if one is not already entered.
    4. Select a company to assign the page to in the “Assign Company” field if not already assigned.
    5. The page can now be laid out and designed in the editor field like any other WordPress page.
    6. Determine which lists you would like to display on the page (i.e. file list (shortcode: [accp_clientfiles]), invoice list (shortcode: [accp_clientinvoices]) and place the shortcode(s) within your layout. Each list will be displayed on the page wherever the shortcode has been added. Please see the shortcodes section on this page for information on customizing your shortcodes.
    7. Lastly, save/publish the post to make the page available to clients and customers.

    Quick Start Plugin Settings

    1. Navigate to WordPress Admin -> Client Portal -> Settings.
    2. Pro Feature – Login Redirection – If you do not already have login redirection implemented through another plugin you can choose to redirect users on login by selecting an option in the “Client Login Redirect” field.
    3. Pro Feature – Automatically Mark Client Invoices as Paid – If you have WooCommerce enabled and configured, you can choose how you would like to handle the invoice status when a WooCommerce order is completed, by selecting an option in the “Automatically Mark Invoices as Paid” field.
    4. Pro Feature – Pay All Functionality – If you have WooCommerce enabled and configured, you can enable pay-all functionality in the “Pay-All Functionality for Invoices” field. This will allow clients to add all displayed invoices to the cart at once, for cases in which there are more than one unpaid invoice.
    5. Lastly, click the “Save Change” button, when finished.

    Shortcodes

    Invoice Shortcode – [accp_clientinvoices]

    The “accp_clientinvoices” shortcode allows you to display lists of client-specific invoices on pages.

    You can also customize the look and functionality of your invoice lists using the attributes listed below.

    Note: While this shortcode does not have any required attributes, it is best to embed shortcodes that are limited to a single invoice status (i.e. either “paid” or “unpaid”). In most cases, this will provide a better experience for your clients and customers.

    Example of Shortcode with All Attributes Set: [accp_clientinvoices invoice_status=”unpaid” display_pay_btn=”true” categories=”category1-slug, category2-slug” display_number=”20″ order_by=”title” order=”ASC” show_excerpt=”true” excerpt_length=”50″ show_thumbnail=”true” thumbnail_size=”portfolio” align_thumbnail=”center” show_post_date=”true” due_date=”true” past_due_notice=”true” list_id=”1″ exclude_user=”53″ exclude_role=”Subscriber”] Attributes
    • invoice_status this is the payment status of the invoice. Accepted Values: “paid” or “unpaid”. Default: “unpaid”.
    • display_pay_btn this will display a pay button if the “invoice_status” attribute is set to “unpaid” and a WooCommerce product id has been entered in the invoice. Accepted Values: “true” or “false”. Default: “false”.
    • due_date this will display the due date if a due date has been entered in the invoice. Accepted Values: “true” or “false”. Default: “false”.
    • past_due_notice this will display a “Past Due” label for each item that has a status of “unpaid” and the current date is after the “due_date”. Accepted Values: “true” or “false”. Default: “false”.
    • display_number this is the number of posts per page. Accepted Values: any positive whole number. Default: -1 (which displays all posts returned in a query).
    • order_by this allows for lists to be sorted by post title instead of date. Accepted Values: “title” or “date”. Default: “date”.
    • order this allows the sort order to be changed. Accepted Values: “ASC” or “DESC”. Default: “DESC”.
    • show_excerpt this allows for a post excerpt to be displayed with each list item. Accepted Values: “true” or “false”. Default: “false”.
    • excerpt_length this allows you to constrain the number of words, “show_excerpt” is set to “true”. Accepted Values: any positive whole number. Default: null.
    • show_thumbnail this allows the featured image to be displayed with each list item (if a featured image is set). Accepted Values: “true” or “false”. Default: null.
    • thumbnail_size this allows you to choose an image size if the “show_thumbnail” attribute is set to “true”. Accepted Values: any valid thumbnail slug that is available in your theme (ex. “full”). Default: null.
    • align_thumbnail this allows the thumbnail image alignment to be set if the “show_thumbnail” attribute is set to “true”. Accepted Values: “center”, “left”, “right”, “float-left”, or “float-right”. Default: null.
    • show_post_date this allows for the WordPress post date to be displayed with each item in a list. Accepted Values: “true” or “false”. Default: “false”.
    • list_id this can be useful for development when you have multiple lists on the same page (ex. this could be helpful when creatig paginated lists on the same page). Accepted Values: any whole positive number that is unique on the page. Default: null
    • categories Accepted Values: this can be entered as an Invoice Category Slug or ID, or a combination of those. Separate multiple values with a comma (ex. “21, category-a”). Default: null.
    • exclude_user this allows you to prevent specific users from viewing items in the list. Accepted Values: the WordPress user ID(s). Separate multiple values with a comma (ex. “21, 45”). Default: null.
    • exclude_role this allows you to prevent specific roles from viewing items in the list. Accepted Values: the WordPress role name. Separate multiple values with a comma (ex. “Subscriber, Editor”). Default: null.
    • id this is an optional parameter that allows for an HTML attribute ID name to be added to the list container div. Accepted Values: any valid HTML ID attribute name. Default: null.
    • class this is an optional parameter that allows for additional class names to be added to the list container div (separate multiple class names with a space). Accepted Values: any valid HTML class name. Default: null.
    • link_title this is an optional parameter that will remove the href from post titles in the list and make them unclickable if the value is set to “no_link”. Accepted Values: “no_link”. Default: null.

    File Shortcode – [accp_clientfiles]

    The “accp_clientfiles” shortcode allows you to display lists of client-specific files on pages.

    You can also customize the look and functionality of your file lists using the attributes listed below.

    Example of Shortcode with All Attributes Set: [accp_clientfiles categories=”category1-slug, category2-slug” display_number=”20″ order_by=”title” order=”ASC” show_excerpt=”true” excerpt_length=”50″ show_thumbnail=”true” thumbnail_size=”portfolio” align_thumbnail=”center” show_post_date=”true” due_date=”true” past_due_notice=”true” exclude_role=”Subscriber” exclude_user=”32″ list_id=”2″] Attributes

    • categories Accepted Values: this can be entered as a File Category Slug or ID, or a combination of those. Separate multiple values with a comma (ex. “21, category-a”). Default: null.
    • due_date this will display the due date if a due date has been entered in the file. Accepted Values: “true” or “false”. Default: “false”.
    • past_due_notice this will display a “Past Due” label a due date has been entered, and the current date is after the “due_date”. Accepted Values: “true” or “false”. Default: “false”.
    • display_number this is the number of posts per page. Accepted Values: any positive whole number. Default: -1 (which displays all posts returned in a query).
    • order_by this allows for lists to be sorted by post title instead of date. Accepted Values: “title” or “date”. Default: “date”.
    • order this allows the sort order to be changed. Accepted Values: “ASC” or “DESC”. Default: “DESC”.
    • show_excerpt this allows for a post excerpt to be displayed with each list item. Accepted Values: “true” or “false”. Default: “false”.
    • excerpt_length this allows you to constrain the number of words, “show_excerpt” is set to “true”. Accepted Values: any positive whole number. Default: null.
    • show_thumbnail this allows the featured image to be displayed with each list item (if a featured image is set). Accepted Values: “true” or “false”. Default: null.
    • thumbnail_size this allows you to choose an image size if the “show_thumbnail” attribute is set to “true”. Accepted Values: any valid thumbnail slug that is available in your theme (ex. “full”). Default: null.
    • align_thumbnail this allows the thumbnail image alignment to be set if the “show_thumbnail” attribute is set to “true”. Accepted Values: “center”, “left”, “right”, “float-left”, or “float-right”. Default: null.
    • show_post_date this allows for the WordPress post date to be displayed with each item in a list. Accepted Values: “true” or “false”. Default: “false”.
    • list_id this can be useful for development when you have multiple lists on the same page (ex. this could be helpful when creatig paginated lists on the same page). Accepted Values: any whole positive number that is unique on the page. Default: null
    • exclude_user this allows you to prevent specific users from viewing items in the list. Accepted Values: the WordPress user ID(s). Separate multiple values with a comma (ex. “21, 45”). Default: null.
    • exclude_role this allows you to prevent specific roles from viewing items in the list. Accepted Values: the WordPress role name. Separate multiple values with a comma (ex. “Subscriber, Editor”). Default: null.
    • id this is an optional parameter that allows for an HTML attribute ID name to be added to the list container div. Accepted Values: any valid HTML ID attribute name. Default: null.
    • class this is an optional parameter that allows for additional class names to be added to the list container div (separate multiple class names with a space). Accepted Values: any valid HTML class name. Default: null.
    • link_title this is an optional parameter that will remove the href from post titles in the list and make them unclickable if the value is set to “no_link”. Accepted Values: “no_link”. Default: null.

    Company Menu Shortcode – [accp_company_menu]

    The “accp_company_menu” shortcode allows you to display a menu on client pages that is automatically generated from all client pages that are assigned to a given company.

    You can also customize the look and functionality of your menu using the attributes listed below.

    Example of Shortcode with All Attributes Set: [accp_company_menu list_style=”horizontal” excluded_page_ids=”1234, 5678″ align=”right”] Attributes

    • excluded_page_ids this allows for pages that are assigned to a given company to be excluded from the company menu. Accepts a comma separated list of Client Page ID’s. Default = null.
    • list_style this allows the UL orientation to be change. Accepts ‘vertical’ or ‘horizontal.’ Default = horizontal.
    • align this allows for the menu alignment to be set. Accepts ‘left,’ ‘right,’ or ‘center.’ Default = left.

    Workflows

    Constellation Client Portal has a lot of options for implementation, and below are several workflows to help get you started. Some of these workflows may work within your operation as is, or you can use these as a reference for creating your own workflows.

    Also, if you have a workflow that you think would be helpful to others, please feel free to let us know.

    Layout Client Pages

    Workflow – Create a Single Unique Page for Each Client

    This workflow entails creating a single Client Page for each client that serves as the client home page and displays all unique client content on a single page.

    This method works well if you have a concise amount of data/information to display to your clients (ex. displaying a current invoice along with a list of paid invoices on a single page).

    Instructions:

    1. Create a client page and assign it to a Company.
    2. Layout your page, and add the needed shortcode(s) to the page to display unique client content.

    Workflow – Create a Client Home Page Along with Additional Client Pages

    This workflow entails creating a home page for each client, then creating additional pages that are assigned to the client.

    This method works well if you want to display more information that can be contained on a single page in an organized way.

    Instructions:

    1. Create a client page and assign it to a Company.
    2. Create additional client pages as needed
    3. Layout your pages, and add the needed shortcode(s) to the pages to display unique client content.

    When laying out pages, it might also be helpful to create a custom html menu to that you embed on each client page (optional).

    Display Invoices

    Workflow – Display a Current Invoice Along with a List of Paid Invoices on a Page

    This workflow details how to display a current invoice, along with a list of paid invoices below the current invoice.

    Instructions:

    1. Open an existing Client Page and add your current invoice shortcode to the page (Example shortcode: [accp_clientinvoices invoice_status=”unpaid” due_date=”true” past_due_notice=”true” display_pay_btn=”true”] ).
    2. Layout the rest of your page, and add your paid invoice shortcode somewhere below the current invoice section (Example shortcode: [accp_clientinvoices invoice_status=”paid”] ).

    Display Files

    Workflow – Display a List of Files on a Page

    This workflow details how to display a list of files on a page.

    Instructions:

    1. Open an existing Client Page and add your current client file shortcode to the page (Example shortcode: [accp_clientfiles categories=”category1-slug, category2-slug” display_number=”20″ order_by=”title” order=”ASC” show_excerpt=”true” excerpt_length=”50″ show_thumbnail=”true” thumbnail_size=”portfolio” align_thumbnail=”center”] ).
    ARS