You can extend the functionality of custom objects to your support portal in Freshdesk. Enable your customers to raise tickets associated with a record by making custom objects visible on the customer portal. Agents can view/update the records based on the tickets raised.


Scenario 1 - Making the lookup field visible on the support portal

Let’s say you are an eCommerce company that sells furniture online. Customers can report problems with their orders/check their order status by raising a ticket, calling, or starting a chat with your support team. 


You have a custom object called ‘Orders' associated with Tickets via a lookup field ‘Order ID.’

With this enhancement to custom objects, you can make this lookup field (Order ID) visible on the customer portal. This way, customers can directly mention their Order ID and raise tickets. This will save time for agents who usually have to fetch the order details based on customer contact details and manually update them in the ticket. 


You must associate custom objects with tickets to enable customers to raise tickets against them through the customer portal.


Let us see how to enable custom objects in the customer portal for the above scenario:

  • Create a  custom object called ‘Orders.’ 

  • Go to Admin → Ticket fields

  • Create a lookup field, and call it 'Order ID' 

  • Under ‘Behaviour for Customer,’ check the box for ‘Visible on the Portals ticket page’ and ‘Editable in forms and ticket page’

  • Provide the Label for agents and customers as ‘Order ID.’ This is customizable based on your use case.

  • Save the field.


Refer to this to understand how to create custom objects and lookup fields.



When customers want to raise a ticket with an order they had placed, they will go to your website and raise a ticket. This is how they can raise a ticket directly against their specific order:

  • Click on ‘Submit a ticket'

  • Input the Requester name, ticket subject, and description

  • Provide the Order ID for which you want to raise the ticket 

  • Provide attachments, if any, and click ‘Submit’



Now, your customers can create tickets while associating them with their particular order. This way, agents can act on the ticket with full context on the issue, and they can save time spent on manually updating the ticket with order details. 


This is how the ticket will be displayed to agents within Freshdesk:



Let us say customers want to view their order information on one screen after raising the ticket. Here’s how you can do it:

  • Go to Admin → Portals, and click ‘Customize’

  • Click ‘Edit theme’ and go to the ‘Pages’ tab

  • Click  ‘Insert placeholder’

  • Select ‘Custom Objects’ from the dropdown and click ‘Orders’

  • The code snippet for the custom object will be inserted automatically

  • You can also customize the fields to be displayed in the widget that will appear on the customer portal

    • Let us say we have 10 fields in the actual custom object, and you only want to display three fields in the widget that will appear on the customer portal.

    • In the code snippet, under the fields tag, you can choose ‘Order ID,’ ‘Price,’ and ‘Delivery date’

  • You can display only up to 5 custom object fields in the customer portal

  •  Hit Save


Mint theme:



Marina theme:



You can edit the Portal theme only from the following pages within Freshdesk: Ticket details Archive details Public details Archive public details


Where to insert the code snippet?

The placement of this snippet is left to user discretion and can be placed anywhere on the Portals customization page. However, the following is recommended to have it appear on the sidebar:


  • Place the code snippet before or after {% snippet ticket_details %} based on whether the widgets have to be shown above or below the ticket fields.

  • If you’re on the new theme (marina), enclose the widget(s) and the ticket_details snippet in a new div as shown below:

<div class='col-lg-3 ticket-details-sidebar'>  {% custom_object_widget "Hotel" %}    {      "fields": ["Name","ticket","sample text","Number","Date"]    }  {% endcustom_object_widget %}  {% snippet ticket_details %}
</div>
JavaScript

  • Add the following custom CSS in the CSS customization:

.ticket-details-sidebar .fw-sidebar-wrapper { width: 100%;
}
CSS



Scenario 2 - Lookup field behavior in the customer portal when contact is associated with the custom object

You can associate existing custom object records with a particular contact. When a customer is logged in and tries to raise a ticket through the customer portal, the lookup field will only display those records that are linked to them.


In the example above, let us say Sarah James ordered a table set from your online store. You can associate Sarah James with the particular record by following the below steps:

  • Go to your custom object ‘Orders’

  • Click the order that you would like to associate with Sarah James

  • Click on Edit record

  • Under the ‘Customers name’ field, select Sarah James

  • Hit Save



This record is now associated with Sarah James. Let us say Sarah James has an issue with their order and wants to request a refund. To do this, they can simply log in to your website, and the lookup field will only display those orders that are associated with them. This way, they can save time spent on hunting for their Order ID and other required details. 

 

Scenario 3 - Changing the default lookup field association when multiple contacts are associated with a lookup field

There are three native objects in Freshdesk - Tickets, Contacts, and Companies. Custom objects can be associated with one, or all of them. 


Let us consider a scenario where we have a custom object called ‘Bookings’ that represents table bookings made at a restaurant. This custom object is associated with tickets and contacts. Let us say that this restaurant only seats 5 people at a table at a time. We can create five lookup fields for this object that will point to each customer that will be seated at the table. We can call the lookup field ‘customer 1’, ‘customer 2’,... etc. 


Now, when Sarah James books a table for five, each lookup field is associated with a contact, and ‘customer 1’ will be Sarah James, ‘customer 2’ will be Bob Tree, and so on. Let us say that they have issues with their reservation, and Sarah James logs in and raises a ticket through your website. In this scenario, Freshdesk will automatically fetch the booking number associated with Sarah. When Bob Tree raises a ticket for the same booking, the lookup field will not show results. When there are multiple lookup fields associated with one custom object, Freshdesk will automatically associate it with the first contact that was created. 


To change the automatic association of the primary contact, follow the steps below:

  • Go to Admin → Portals, and click ‘Customize’

  • Click ‘Edit theme’ and go to the ‘Pages’ tab

  • Click ‘Insert placeholder’

  • Add the following script at the end of ‘Submit ticket’/ ‘Ticket view’

<script>
document.getElementById('helpdesk_ticket_custom_field_cf_hotel_u_11010411827').dataset.primaryContactAssoc = "contact"
</script>
JavaScript


where “helpdesk_ticket_custom_field_cf_hotel_u_11010411827" is the ID of the ticket field element, and “contact” is the “Label for agents” of the contact association field in the CO schema.


To fetch the ID of the lookup ticket field element, you have to use the search string. Follow the steps below to get the lookup field id. 


For Mint theme:

  1. In Freshdesk, click on your profile icon in the top right corner

  2. Click on ‘Go to customer portal’

  3. Go to the tickets tab and click on ‘New support ticket’

  4. Right-click on the lookup field that you want to change the contact association for, and click on ‘Inspect’

  5. Go to the Elements tab

  6. Press cmd-f(mac) or ctrl-f (windows), paste the below search string and hit Enter

    1. For top-level lookup ticket fields –> search string is [data-lookup-field="true"]

    2. For ticket lookup fields inside sections –> search string is [data-section-lookup-field="true"]

  7. You will get a list of lookup field HTML elements present on the page

  8. Each field element will have a value id as shown below; this is the id you need to use in the above script



For Marina theme:

  1. In Freshdesk, click on your profile icon in the top right corner

  2. Click on ‘Go to customer portal’

  3. Click on ‘Submit a ticket’

  4. Right-click on the lookup field that you want to change the contact association for, and click on ‘Inspect’

  5. Go to the Elements tab

  6. Press cmd-f(mac) or ctrl-f (windows), paste the below search string and hit Enter

    1. For top-level lookup ticket fields –> search string is [data-lookup-field="true"]

    2. For ticket lookup fields inside sections –> search string is [data-lookup-field="true"]

  7. You will get a list of lookup field HTML elements present on the page

  8. Each field element will have a value id as shown below; this is the id you need to use in the above script