Salesforce Pre-Chat Lightning Web Component CSS

HomeInfallibleTechie Admin

Salesforce Pre-Chat Lightning Web Component CSS

InfallibleTechie Admin

SLDS CSS won’t work in the Pre-Chat Lightning Web Component since it loads outside the Lightning. So, we can apply the CSS directly on the elements using style property.

Sample Lightning Web Component:

HTML:

<template>
    <div style="height: 100%; overflow:scroll;">
        <lightning-card title="Pre-Chat Form">       
            <fieldset>
                <legend>
                    Please select the department
                </legend>
                <template 
                    for:each={options} 
                    for:item="strOption">
                    <div key={strOption.value}>
                        <input 
                            type="radio" 
                            value={strOption.value}
                            name="department"
                            onchange={handleSelect}/>
                        <label>
                            {strOption.label}
                        </label>
                    </div>
                </template>
            </fieldset>           
            <template 
                for:each={fields} 
                for:item="field">
                <div key={field.name}>
                    <lightning-input
                        name={field.name}
                        label={field.label}
                        value={field.value}
                        max-length={field.maxLength}
                        required={field.required}>
                    </lightning-input>
                </div>
            </template>
        </lightning-card>
        <br/><br/>
        <button 
            onclick={handleStartChat}
            style="background-color: darkred; color: white;">
            Start Chat
        </button>
        <br/><br/>
    </div>
</template>

JavaScript:

import BasePrechat from 'lightningsnapin/basePrechat';
import { api } from 'lwc';

export default class PreChatComponent extends BasePrechat {

    @api prechatFields;
    fields;
    namelist;

    connectedCallback() {
        
        this.fields = this.prechatFields.map( field => {
            const { label, name, value, required, maxLength } = field;

            return { label, value, name, required, maxLength };
        });
        this.namelist = this.fields.map( field => field.name );

    }

    get options() {

        return [
            { label: 'Sales', value: 'Sales' },
            { label: 'Service', value: 'Service' }
        ];

    }

    handleSelect( event ) {

        let selectedOption = event.target.value;
        console.log(
            'selectedOption is',
            selectedOption
        );

    }

    handleStartChat() {

        this.template.querySelectorAll( "lightning-input" ).forEach( input => {
            this.fields[ this.namelist.indexOf( input.name ) ].value = input.value;
        });
        if ( this.validateFields( this.fields ).valid ) {

            console.log( 'Starting Chat' );
            this.startChat( this.fields );

        } else {
            console.log( 'Some error in initiating the Chat' );
        }

    }

}

js-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>60.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightningSnapin__PreChat</target>
  </targets>
</LightningComponentBundle>

Output:

Leave a Reply