Step-by-Step Guide to Integrate Ask-AI into Salesforce

Step 1: Injecting the App into Your Website's "Head"

1. Open Salesforce Builder:

   • Navigate to your website's control panel.
   • Click on the "Open Website Builder" button as shown in your platform's dashboard.

   

   
   

2. Access the Advanced Settings:

   • In the site-builder, go to the Settings menu.
   • Choose Advanced.
   • Find and select Edit Head Markup to open the script editor.

   

   
   

3. Insert Ask-AI App Script:

   • In the opened editor, paste the script required for the Ask-AI external search. Ensure these are the latest versions as directed in the Help Center link.

   • Script insertion look like this:

     HTML

     
     <!-- Ask-AI searchbar -->
     <script type="text/javascript" src="https://external-search.ask-ai.com/ask_ai_sb.js"></script>
     <script type="text/javascript">
     window.renderAskAISearchBar("UNIQUE_ID_OF_SEARCH_CONTAINER", "API_TOKEN", {"hostProvider": "salesforce", "langCode": "en"});
     </script>
     

   • Click on Save to apply changes and close the editor.

   

Step 2 (optional) - Render the App in a custom container

1. Open the Salesforce builder

2. Open the “Components” panel, locate the “HTML Editor” component, and drag&drop it on the template where you want to render the search bar.

3. Click on “Edit Markup” to update the HTML content. Add any container with a unique ID, where the search bar will be rendered.

4. Open the “Settings” panel and go to the “Advanced” tab, open an editor by clicking on the “Edit Head Markup”. Put the

HTML

<!-- Ask-AI searchbar -->
<style>
UNIQUE_ID_OF_CUSTOM_CONTAINER {
	max-width: 450px;
}
</style>
<script type="text/javascript" src="https://external-search.ask-ai.com/ask_ai_sb.js"></script>
<script type="text/javascript">
window.renderAskAISearchBar("UNIQUE_ID_OF_CUSTOM_CONTAINER", "API_TOKEN", {"hostProvider": "salesforce", "langCode": "en"});
</script>

Step 3: Update Content Security Policies (CSP)

After adding scripts to the page, Salesforce warns you that you need to update the CSP settings in order to allow the scripts to work properly.

1. Navigate to Security Settings:

   • Go to Settings and select Security & Privacy.
   • Here, you'll find settings related to content security policies and trusted sites.

2. Adjust CSP Settings:

   • Within the Content Security Policy (CSP) Settings, click on the "Change CSP settings" link.
   • Select Relaxed CSP to allow the integration of external scripts like those of Ask-AI. This setting adjusts the CSP to permit inline scripts and externally hosted scripts necessary for the app to function properly.

   

   • Ensure the CSP settings include allowances for script-src and other relevant directives based on the scripts used by the Ask-AI app.

   

Step 3: Update Trusted URLs

1. Access the Setup Panel:

   • Navigate to the Setup panel in Salesforce.
   • Use the search function to find and select Trusted URLs under the security settings.

2. Add New Trusted URLs:

   • Click on the New Trusted URL button to create a new entry.

   

   
   

3. For Ask-Ai integration:

   • Add https://*.ask-ai.co and check all checkboxes in the Content Security Policy (CSP) Directives to ensure full functionality of the script across various security settings.
   • This should include settings like connect-src, font-src, frame-src, img-src, media-src, object-src, script-src, and style-src

   

   
   

4. Add Cloudinary for Image Resources:

   • Add https://*.cloudinary.com if your application uses images hosted by Cloudinary.
   • Check only the img-src directive under CSP Directives to restrict permissions to image loading, which enhances security by limiting broader access.

   

   
   

5. Review and Save:

   • Review the entries for accuracy and completeness of directives.
   • Click Save to confirm the changes, ensuring that both URLs are listed correctly under Trusted URLs with the appropriate CSP settings.

6. Verify the Configuration:

   • After saving, it’s important to verify that the URLs have been added successfully and that no CSP errors are reported.
   • Optionally, this can also be checked from the site-builder by going to the CSP Errors section under Security & Privacy to see if there are any blocks or errors that need further addressing.