Customizing the Experience

To install the Blueprint UI, add this code to any page that will display Blueprint:

<script src="https://embed.blueprint.ai/index.min.js">
</script>

Note that in sandbox environments use https://embed.staging.blueprint.ai/index.min.js.

There are two ways to integrate the Blueprint UI:

Inline - Provide the unique id of an element in your app. Blueprint will appear nested inside the element when the user visits a page containing that element.
Minified - Similar to Inline but with a smaller form factor and more customizable branding. However it does not provide a note viewing and editing experience as in available in Inline.
Floating - A floating icon will appear in the corner of the screen. Users can click the icon to open and interact with Blueprint from within your app. The widget color, icon, and position can be customized.

Inline example

<html>
 <head>
 </head>
 <script>
   window.blueprintSettings = {
     containerId: 'blueprint-container',
     copyNoteButtonText: 'Export to EHR', // Default is "Copy Note"
     patientReference: 'Patient', // Default is "Client"
     hideTreatmentPlan: true, // Default is false
     hidePreviousSessions: true, // Default is false
     width: '400px',
     height: '600px'
   }
 </script>
 <script src="https://embed.blueprint.ai/index.min.js">
 </script>
 <body>
   <div id="blueprint-container">
   </div>
 </body>
</html>

Minified example

html>
 <head>
 </head>
 <script>
   window.blueprintSettings = {
     containerId: 'blueprint-container',
     width: '250px',
     height: '220px',
     isMinifiedView: true,
     minifiedViewSettings: {
       container: {
         borderColor: '#E4E5E6',
         borderWidth: '1px',
         borderRadius: '8px',
         backgroundColor: '#3A65620A',
       },
       buttons: {
         borderRadius: '5px',
         primaryBackgroundColor: '#2D54E8',
         primaryTextColor: '#FFFFFF',
         secondaryBackgroundColor: '#FFFFFF',
         secondaryTextColor: '#2D54E8',
       },
       inputs: {
         borderRadius: '25px',
       },
       audioIndicatorColor: '#2D54E8',
     }
   }
 </script>
 <script src="https://embed.blueprin.ai/index.min.js">
 </script>
 <body>
 </body>
</html>

Floating example

html>
 <head>
 </head>
 <script>
   window.blueprintSettings = {
     position: 'bottom-right', // 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'
     width: '350px',
     height: '550px',
     openButtonIcon: 'path/to/svg',
     closeButtonIcon: 'path/to/svg',
     buttonColor: '#2D54E8',
     isDraggable: true, // Allows the user to drag Blueprint around the screen
     isAlwaysOpen: false, // Hides the icon; Blueprint appears open at all times
     copyNoteButtonText: 'Send to EHR'
   }
 </script>
 <script src="https://embed.blueprint.ai/index.min.js">
 </script>
 <body>
 </body>
</html>