You need to sign in to do that
Don't have an account?
sunil h 10
PreChat Embedded Service Code doesnot render lightning component css styling
We are trying to implement embedded service chat in our customers custom website and our pre chat is supported by using lightning component
Below Lightning Component Code ScreenShot:
everything is working fine except lightning component styling is not rendering as expect
Chat UI from website:
we tried pasting Embedded Service Code Snippets in vf page and still ligthgning component styling not rendering, but will we host chat in salesforce community there lightning styling is working as expected.
Visual Force Code where we pasted
Embedded Service Code Snippets
thanks in advc
Below Lightning Component Code ScreenShot:
<aura:component implements="lightningsnapin:prechatUI" description="Sample custom pre-chat component for Embedded Chat. Implemented using Aura."> <aura:attribute name="prechatFieldComponents" type="List" description="An array of objects representing the pre-chat fields specified in pre-chat setup."/> <aura:handler name="init" value="{!this}" action="{!c.onInit}" /> <aura:locator target="startButton" description="Pre-chat form submit button."/> <lightningsnapin:prechatAPI aura:id="prechatAPI"/> <div class="prechatUI"> <div class="prechatContent"> <div class="slds-scrollable_y" style="height:24rem;overflow-y: scroll;"> <ul class="fieldsList"> <p>Hej! Vill du boka ett fysiskt besök, besök vår</p> <a href="https://" target="_blank">tidsbokning. </a>Du kan också prata med en <p>tandläkare direkt i din mobil genom</p> <a href="https://" target="_blank">Onlinetandläkaren.</a> <lightning:layout multipleRows="true"> <lightning:layoutItem size="12" padding="around-small"> {!v.prechatFieldComponents} </lightning:layoutItem> </lightning:layout> <a href="https://" target="_blank">policy</a> </ul> </div> </div> <div class="startButtonWrapper"> <ui:button aura:id="startButton" class="startButton" label="Börja chatta" press="{!c.handleStartButtonClick}"/> </div> </div> </aura:component>once we are done with adding all necessary fields in prechat configuration, we extract code from Embedded Service Code snippet and paste in our website html pages,
everything is working fine except lightning component styling is not rendering as expect
Chat UI from website:
we tried pasting Embedded Service Code Snippets in vf page and still ligthgning component styling not rendering, but will we host chat in salesforce community there lightning styling is working as expected.
Visual Force Code where we pasted
Embedded Service Code Snippets
<apex:page > <html> <head> </head> <body> <p>prechat</p> <style type='text/css'> .embeddedServiceHelpButton .helpButton .uiButton { background-color: #2aaaca; font-family: "Gilroy", sans-serif; } .embeddedServiceHelpButton .helpButton .uiButton:focus { outline: 1px solid #2aaaca; } </style> <script type='text/javascript' src='https://service.force.com/embeddedservice/5.0/esw.min.js'></script> <script type='text/javascript'> var initESW = function(gslbBaseURL) { embedded_svc.settings.displayHelpButton = true; //Or false embedded_svc.settings.language = ''; //For example, enter 'en' or 'en-US' //embedded_svc.settings.defaultMinimizedText = '...'; //(Defaults to Chat with an Expert) //embedded_svc.settings.disabledMinimizedText = '...'; //(Defaults to Agent Offline) //embedded_svc.settings.loadingText = ''; //(Defaults to Loading) //embedded_svc.settings.storageDomain = 'yourdomain.com'; //(Sets the domain for your deployment so that visitors can navigate subdomains during a chat session) // Settings for Chat //embedded_svc.settings.directToButtonRouting = function(prechatFormData) { // Dynamically changes the button ID based on what the visitor enters in the pre-chat form. // Returns a valid button ID. //}; //embedded_svc.settings.prepopulatedPrechatFields = {}; //Sets the auto-population of pre-chat form fields //embedded_svc.settings.fallbackRouting = []; //An array of button IDs, user IDs, or userId_buttonId //embedded_svc.settings.offlineSupportMinimizedText = '...'; //(Defaults to Contact Us) embedded_svc.settings.enabledFeatures = ['LiveAgent']; embedded_svc.settings.entryFeature = 'LiveAgent'; embedded_svc.init( 'https://eu29.salesforce.com', 'https://login.salesforce.com/liveAgentSetupFlow', gslbBaseURL, '00D3X000001t1Rc', 'Team', { baseLiveAgentContentURL: 'https://c.la1-c1-fra.salesforceliveagent.com/content', deploymentId: '', buttonId: '5733X000000Pnnu', baseLiveAgentURL: 'https://d.la1-c1-fra.salesforceliveagent.com/chat', eswLiveAgentDevName: '', isOfflineSupportEnabled: true } ); }; if (!window.embedded_svc) { var s = document.createElement('script'); s.setAttribute('src', 'https://eu29.salesforce.com/embeddedservice/5.0/esw.min.js'); s.onload = function() { initESW(null); }; document.body.appendChild(s); } else { initESW('https://service.force.com'); } </script> </body> </Html> </apex:page>any help is highly appreciated,
thanks in advc
I have created a aura component to display a custom prechat form. Here is the code snippet of the form in the component. Basically, I have used the standard lightning styles from Salesforce.