Customizing the Experience

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

<script type="module" 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: false,
     width: '400px',
     height: '600px'
   }
 </script>
 <script type="module" 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 type="module" src="https://embed.blueprin.ai/index.min.js">
 </script>
 <body>
 </body>
</html>

Floating example

html>
 <head>
 </head>
 <script>
   window.blueprintSettings = {
     position: 'bottom-right',
     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 type="module" src="https://embed.blueprint.ai/index.min.js">
 </script>
 <body>
 </body>
</html>