function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
sunil h 10sunil 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:
<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:
User-added image

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 
 
John Collins 50John Collins 50
sunhil, did you ever figure this out? I'm using LWC preChat and have the same issue.
Raji Srinivasan 14Raji Srinivasan 14
John & Sunil,
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.
<div class="stateBody embeddedServiceSidebarState">
        <div class="prechatUI embeddedServiceLiveAgentStatePrechatDefaultUI">
            <div class="formContent embeddedServiceSidebarForm">
                <ul class="fieldList">
                    <aura:iteration items="{!v.prechatFieldComponents}" var="eachField">
                        <li class="inputText embeddedServiceSidebarFormField">
                            {!eachField}                    
                        </li>
                    </aura:iteration>
                </ul>
            </div>
            
            <div class="startButtonWrapper buttonWrapper embeddedServiceSidebarForm">
                <ui:button aura:id="startButton" class="startButton uiButton--default uiButton embeddedServiceSidebarButton" label="{!$Label.LiveAgentPrechat.StartChat}" press="{!c.handleStartButtonClick}"/>
            </div>
        </div>
    </div>