Install a Search Client in Khoros

Download the Khoros Aurora Search Client.

1. Log into your Aurora community instance.

2. Click on the user profile icon and select Dev Tools.

   

3. Scroll down to the Available Git Branches and click on the active branch currently associated with your Aurora community.

   

4. Clone your Git repository on your local machine.

5. Review your Git repository and understand its structure. The contents of the cloned repository in the “stage-main” branch, the folder consists of res and src folders which are used to keep “endpoints” and “component” respectively.

6. You need to navigate to your res folder and create five .hbs components (OR react components based on your preference but .hbs is preferred because of lightweight components) for five different SearchUnify components - Analytics, Auto-complete, Page Rating, Recommendations, and Searchunify.

   • Analytics - Provides SU configurations & tracks analytics | Required

   • Searchunify - Core SearchUnify application (search) | Required

   • Auto-complete - AutoComplete Box | Required

   • Page Rating - Feedback widget | Optional

   • Recommendations - Recommended Articles widget | Optional

   The purpose of these components is to import different SearchUnify apps via scripts.

   IMPORTANT.

   • The analytics component is a special component; it doesn’t have a UI.

   • Import the analytics component into the header section of a page.

   • All other components depend on the analytics component.

   • No other component will work if the analytics component hasn’t been configured and imported correctly.

7. You need to add the scripts given in the readme.txt file in the downloaded search client files to their respective .hbs components. (you can also import the same scripts using react components as well)

   There’s an aurora-middleware-24-11.zip file in the downloaded search client .zip file. You can refer to the res folder after extraction and take a look at the five components.

8. Once components are created, copy the scripts shared with you in the “readme.txt” file onto these newly created components one by one.

9. At this point, your components have been successfully updated, now let us focus on adding the searchunify’s endpoint.

10. Navigate to src > endpoints > searches in the zip extract and copy this endpoint to the same location in your repository.

11. Search for “accessToken” and replace the access token with the one provided in the readme.txt file.

12. Both the components and endpoints should be updated by this step. You should be able to commit these changes. After committing the changes, create pull requests for the same.

    Note: These pull requests will be sent for a review per the Git hierarchy within your organizations. Once it is approved, proceed to deploying these components on your Khoros Aurora community.

13. After you commit any changes in any of the src folder files, a build is created in the Actions section of the Git repository.

    

    Review if your last build was successful or not. There should be no error in the build.

    If your last build failed, contact the SearchUnify support team to get it resolved.

14. Now, go back to the Khoros Aurora community instance and navigate to the Designer tab and select Page Templates.

    

15. Click Edit on the page where you want to deploy the SearchUnify component.

    

16. Click on the icon where you want to add the SearchUnify components.

    

17. Select Custom.

    

18. You will see the list of components you added in Git.

    

19. Double-click on the component to add it on the page. Add the “Analytics” component onto the header section first. This component is special and lacks UI. The component ensures that an.js is imported across the pages. Without an.js, no other component will work.

20. Now double click on the “AutoComplete” component (next image) to add it.

21. After dropping the component, click Save and Publish.

The following snapshot shows the SearchUnify's AutoComplete component deployed on a Khoros Aurora community page.

Similarly, you can add the other SearchUnify components to your Aurora Community as well based on your requirements.

Create New Endpoints

There are five endpoints that need to be created for different SearchUnify properties, including setting up the connection between Khoros and SearchUnify, to collect search analytics, and to provide search recommendations.

1. Sign into your Khoros community as an admin. Click on your profile icon and select Community admin.

   

2. Click Studio.

   

3. Navigate to Endpoints and click New Endpoint.

   

4. Give your endpoint a Title and click Save.

   

    

5. Open the searchUnify_Endpoint file from the extracted search client files and copy its code.

6. Paste the code in View Content and select application/json as View Content Type. Press Save.

   

7. Similarly, create four more endpoints and use the code from searchunify_live_counts, searchunify_Recommedations, searchUnify_GptEndpoint, and searchunify_saves_results_Endpoint respectively. Make sure to select application/json as View Content Type for all the endpoints.

8. Copy the names of the all the endpoints.

   

Create New Khoros Component

1. Navigate to Components and click New Component.

   

2. Give your component a name and click Create.

   

3. Open the searchUnify_Component file from the extracted search client files and copy the code.

4. Paste the code in Component Content.

   

5. Scroll down the Component Content code and replace <your endpoint name> with respective endpoint names. For example, the name of the endpoint created with searchunify_Endpoint will go to the window.su_community_path.

   

   NOTE. Make sure you remove the angle brackets (<>) from the endpoint names and paste the endpoint names in this format: ("endpoint_name").

6. After you have entered all the endpoint names, press Save.

Optional. Create a New Khoros Page

The Khoros component that you created is to be inserted into a Khoros page. You can select one of your existing community pages to host SearchUnify-powered search and search results, or create a new page. This section explains how to create a page in Khoros from scratch.

1. Navigate to Page, and click New.

   

2. Enter a page name in New Page Name prefixed by ForumPage., select a layout from the Page Layouts dropdown (we recommend using One Column), and click Create.

   

Whitelist Your SearchUnify Endpoint

Navigate to Admin > System, and click HTTP Client.

In the Alllowed domain names field, enter your Service Endpoint (your SearchUnify instance URL) given in the readnme.txt file . Finally, click Save.

Insert SearchUnify Component in a Khoros Page

1. From Admin > Page, open the page on which you want to use the search component. You can select the new page that you created or an existing page.

2. Expand Custom Components.

   

3. Click to add the component on the selected page.

   

4. Drag the component to main-content and press Save.

   

Insert SearchUnify Page on a Khoros Board

1. Navigate to Admin > Community Structure.

   

2. Click on Choose to select the Khoros Board on which you want to insert the page. For illustration, we selected the KhorosBoardM.

   

   NOTE. Be sure to select only a Khoros board. No other Khoros object is supported in SearchUnify.

3. Navigate to Content > Custom Pages.

   

4. In the Forum Page dropdown, select the page on which you deployed the SearchUnify component (refer to the Insert SearchUnify Component in a Khoros Page section). And click Save.

   

5. Click Go to Board and you will land on the search page powered by SearchUnify.