invoiceninja/docs/proposals.rst

Proposals
=========

When submitting a regular quote is not enough, the advanced Proposals feature comes to the rescue.

Proposals are a powerful sales and marketing tool to present your offer for a gig. Whether you're competing against other providers, or you want to make a fantastic impression, the proposal function is a great way to custom-create a personalized proposal containing all the information you need to convey.

The proposals feature is based on grapesjs.com, which enables HTML and CSS management. This advanced tool gives experienced programmers the freedom to create customized, professional proposals with ease, directly within Invoice Ninja, integrating your quote information with one click.

There are three key parts to creating proposals: Proposals, Templates and Snippets. Let's explore them one by one.

Proposals
"""""""""

Each proposal is based on a quote. In order to create a proposal, you'll first need to create a quote.

To create a quote, click on New Quote on the Quotes list page, or click the + sign on the Quotes tab in the main sidebar. Once you've created the quote, go to the Proposals list page by clicking on the Proposals tab in the main sidebar.

Proposals List Page
^^^^^^^^^^^^^^^^^^^

The Proposals list page features a table of all active proposals and corresponding information.

The table consists of the following data columns:

- **Quote**: Every proposal is based on a quote. This is the quote number of the corresponding quote.
- **Client**: The client's name.
- **Template**: The template assigned to the proposal.
- **Date created**: The date the proposal was created.
- **Content**: A short preview of the content/topic of the proposal.
- **Private notes**: Any notes to yourself included in the proposal (these are hidden from the client; only you can see them).
- **Action column**: The action column has a drop-down menu with the option to Edit, Archive or Delete the proposal. To select an action, hover in the action column and click to open the drop-down menu.

Archive / Delete Proposal
^^^^^^^^^^^^^^^^^^^^^^^^^

If you wish to archive or delete a proposal, select the action in the column corresponding to the relevant quote. Once you select Archive or Delete, the proposal will be removed from the table.

.. TIP:: You can also archive a proposal by checking the box to the left of the quote number of the relevant proposal. Then click the Archive button at the top left of the Proposals table.

By default, the Proposals list page will display only active proposals in the table. To view archived or deleted proposals, you need to update the list in the labels field, situated at the top left of the Proposals table, to the right of the gray Archive button.

Click inside the labels field to open the drop-down menu. Then, select Archived and/or Deleted from the menu. The table will automatically refresh to display Archived/Deleted proposals. Archived proposals will display an orange "Archived" label and Deleted proposals will display a red "Deleted" label in the action column.

**To restore an Archived or Deleted Proposal**

First, display the proposal by updating the table to view Archived or Deleted proposals. Then, open the drop-down menu in the action column of the relevant proposal. Click Restore proposal.

New Proposal
^^^^^^^^^^^^

To create a new proposal, click the blue New Proposal + button located at the top right of the Proposals list page. The Proposals/ Create page will open.

.. TIP:: You can create a new proposal from anywhere in the site by clicking the + icon on the Proposals tab on the static sidebar menu at the left of the screen.

Before beginning to work on the proposal design, you'll need to complete the fields in the top section of the page:

- **Quote**: A proposal must be based on an existing quote. To select the quote, click the arrow in the Quote field, and choose the relevant quote from the drop-down menu.
- **Template**: Select the template you wish to use for the proposal by clicking the arrow in the Template field. Choose the relevant template from the drop-down menu.
- **Private notes**: This is an optional field. You can enter notes and comments. They are for your eyes only; all private notes remain hidden from the client.

Now you're ready to design the proposal. You'll be working on the 'canvas' with the proposal editor, rich in design tools to custom create attractive, professional-looking proposals.

The proposal layout is based on the template you choose. Any information contained in the corresponding quote will be automatically embedded in the proposal.

Let's explore the proposal editor toolbar, from right to left:

- **Grid Editor**: When you create a new proposal, the toolbar will be set by default to the far-right icon – the grid editor. Proposals are built on a grid-like canvas. To insert sections, text blocks, icons, links and more, drag and drop the item from the selection that appears in the grid editor, in the sidebar at the right of the canvas.
- **Options button**: Navigation menu that takes you through each design element in the proposal.
- **Component Settings**: Displays the component ID that gives identifying information about the component.
- **Style Manager**: Provides style information and editing options for each design element – Dimensions, Typography and Decorations.
- **Undo/ Redo buttons**: You can undo or redo your last action by clicking on these buttons.
- **Toggle Images**: Turn images in your proposal on or off.
- **Import Template**: Import an external template to apply to the proposal.
- **View Code**: Click to open a window that displays the proposal's code.
- **FullScreen**: Click to work in full screen mode. Click again to return to normal screen.
- **View Components**: Click to display all the components of the proposal.

View Modes
^^^^^^^^^^

At the top left of the proposal canvas, there is a view mode bar that allows you to view the proposal in desktop, tablet or mobile size. Click on the desktop, tablet or mobile icon to choose the view mode.

When You Finish Working on the Proposal

When you've finished designing the proposal, you can choose from three options:

- **Cancel**: Don't like your work? Don't need the proposal after all? Click the gray Cancel button to discard the proposal.
- **Save**: Save a draft to work on or send later by clicking on the green Save button. The proposal will appear in the Proposals table on the Proposals list page.
- **Email**: If you're ready to present the proposal to your client, click the orange Email button. The proposal will be sent to the client's email address.

Templates
"""""""""

Templates enable you to quickly apply standard layout and design features, saving time and making the proposal creation process more efficient.

You can also custom design your own templates, from scratch or based on an existing template.

Templates List page
^^^^^^^^^^^^^^^^^^^

All existing templates are listed in the Templates table, on the Templates list page. To open the Templates list page, click the gray Templates button that appears on the Proposals list page at the top of the Proposals table.

The Templates list page displays a table with the following columns:

- **Name**: The name of the template.
- **Content**: A preview of the template content.
- **Private notes**: Any notes to yourself about the template (these are hidden from the client; only you can see them).

Action column: The action column has a drop-down menu with a number of options:

- **Edit Template**: Click to open the Templates/ Edit page.
- **Clone Template**: Click to duplicate the template and create a new one.
- **New Proposal**: Click to create a new proposal. You'll automatically go to the Proposals/ Create page.

Archive Template/ Delete Template: Select the relevant action to archive or delete a template. Once you select Archive or Delete, the template will be removed from the table.

.. TIP:: You can also archive a template by checking the box to the left of the relevant template name. Then click the Archive button at the top left of the Templates table.

To select an action, hover in the action column and click to open the drop-down menu.

By default, the Templates list page will display only active templates in the table. To view archived or deleted templates, you need to update the list in the labels field, situated at the top left of the Templates table, to the right of the gray Archive button.

Click inside the labels field to open the drop-down menu. Then, select Archived and/or Deleted from the menu. The table will automatically refresh to display Archived/Deleted templates. Archived templates will display an orange "Archived" label and Deleted templates will display a red "Deleted" label in the action column.

**To restore an Archived or Deleted Template**

First, display the template by updating the table to view Archived or Deleted templates. Then, open the drop-down menu of the action column of the relevant template. Click Restore template.

New Template
^^^^^^^^^^^^

To create a new template, go to the Proposals list page. Click the arrow on the gray Templates button, which is situated at the top of the Proposals table. Select New Template from the drop-down menu. The Proposals/ Templates/ Create page will open.

First, complete the fields at the top part of the page:

- **Name**: Choose a template and enter it in the name field.
- **Private notes**: This is an optional field. You can enter notes and comments. They are for your eyes only; all private notes remain hidden from the client.

Then, you can begin work designing the template on the canvas.

If you want to load an existing template to work from, click the Load Template field, located above the template canvas. A drop-down menu will open. Select the template you wish to load.

.. NOTE:: If you add a custom template, the Clean template will be removed. You can add it back by creating a custom template based on the Clean template.

- **Help**: Need help designing your template? Click the gray Help button.
- **Cancel**: To cancel your new template, click the gray Cancel button. The work you've done so far will NOT be saved.
- **Save**: To save the template, click the green Save button. The template will appear in the table on the Templates list page.

Snippets
""""""""

Snippets are pre-defined content elements that you can create and reuse in your proposals over and over. Instead of designing parts of your proposal every time from scratch, you can save snippets, which you can then insert in any proposal with just a click. This saves you tons of time and effort, so you can create proposals faster. For example, you may want to include a short bio about yourself in every proposal. Create a snippet of your bio, and add it to proposals anywhere, anytime you want.

When you create a snippet, it will appear in the right sidebar in the proposal editor.

Snippets List page
^^^^^^^^^^^^^^^^^^

All existing snippets are listed in the Snippets table, on the Snippets list page. To open the Snippets list page, click the gray Snippets button that appears on the Proposals list page at the top of the Proposals table.

The Snippets list page displays a table with the following columns:

- **Name**: The name of the snippet.
- **Category**: The category the snippet belongs to.
- **Content**: A preview of the snippet content.
- **Private notes**: Any notes to yourself about the snippet (these are hidden from the client; only you can see them).

Action column - The action column has a drop-down menu with a number of options:

- **Edit Snippet**: Click to open the Proposals/ Snippets/ Edit page.

Archive Snippet/ Delete Snippet: Select the relevant action to archive or delete a snippet. Once you select Archive or Delete, the snippet will be removed from the table.

.. TIP:: You can also archive a snippet by checking the box to the left of the relevant snippet name in the table. Then click the Archive button at the top left of the Snippets table.

To select an action, hover in the action column and click to open the drop-down menu.

By default, the Snippets list page will display only active snippets in the table. To view archived or deleted snippets, you need to update the list in the labels field, situated at the top left of the Snippets table, to the right of the gray Archive button.

Click inside the labels field to open the drop-down menu. Then, select Archived and/or Deleted from the menu. The table will automatically refresh to display Archived/Deleted snippets. Archived snippets will display an orange "Archived" label and Deleted snippets will display a red "Deleted" label in the action column.

**To restore an Archived or Deleted Snippet**

First, display the snippet by updating the table to view Archived or Deleted snippets. Then, open the drop-down menu of the action column of the relevant snippet. Click Restore snippet.

New Snippet
^^^^^^^^^^^

To create a new snippet, go to the Proposals list page. Click the arrow on the gray Snippets button, which is situated at the top of the Proposals table. Select New Snippet from the drop-down menu. The Proposals/ Snippets/ Create page will open.

First, complete the fields at the top part of the page:

- **Name**: Choose a name for the snippet and enter it in the name field.
- **Category**: Choose a category for the snippet and enter it in the category field.
- **Icon**: Choose an icon for the snippet from the selection available in the icon drop-down menu.
- **Private notes**: This is an optional field. You can enter notes and comments. They are for your eyes only; all private notes remain hidden from the client.

Then, you can begin work designing the snippet on the canvas.
- **Help**: Need help designing your snippet? Click the gray Help button.
- **Cancel**: To cancel your new snippet, click the gray Cancel button. The work you've done so far will NOT be saved.
- **Save**: To save the snippet, click the green Save button. The snippet will appear in the table on the Snippets list page.

Categories
""""""""""

Arranging your snippets into categories can help you keep them organized and logical – which means you'll work faster to get your proposals ready.

You can create new categories and view the Categories list page from the Snippets list page.

**To view the Categories page**

Click the gray Categories button at the top of the Snippets list page.

Categories list page
^^^^^^^^^^^^^^^^^^^^

All existing categories will appear in a table on the Categories list page.

The table includes a Name column, and an action column.

In the action column, you can edit, archive and delete categories.

New Category
^^^^^^^^^^^^

To create a new category, go to the Snippets list page. Click the arrow on the gray Categories button, which is situated at the top of the Snippets table. Select New Category from the drop-down menu. The Proposals/ Categories/ Create page will open.

To create a category, enter a name for the category. Click the green Save button.

**To Edit/ Archive/ Delete a Category**

Click on the action column of the relevant category on the Categories list page and select the action from the drop-down menu. You can also archive a category by checking the box to the left of the Name column and clicking the gray Archive button at the top left of the Categories table.

**To restore an Archived or Deleted Category**

First, display the category by updating the table to view Archived or Deleted categories. You can do this by selecting the Archived/Deleted labels in the labels field, to the right of the gray Archive button above the Categories table. Then, open the drop-down menu of the action column of the relevant category. Click Restore category.

.. TIP:: You can filter and sort data about your Proposals, Templates, Snippets and Categories on the list pages for each.

To filter data, enter keywords in the Filter field, located at the top of the list page. The data in the table will filter automatically according to your keywords.

To sort data by column, click on the column you wish to sort. A white arrow will appear in the column header. An arrow pointing down sorts the data in order from highest to lowest. Click the arrow to reverse the sort order.