Embedded Service: Problem with Multiple Components on a Web Page with Lightning Out

Question

We are using a lightning app with embedded service. we used the instructions given here. The chat button appears on the page but we keep getting this error:
{
    component: "markup://embeddedService:sidebar", 
    componentStack: "[ltng:outAppUnstyled] > [embeddedService:sidebar] > [embeddedService:sidebar]", 
    action: null, 
    name: "SyntaxError", message: "Error in $A.getCallback() [Unexpected end of JSON …debarController/ACTION$getDeploymentConfiguration", …
}
action: null
component: "markup://embeddedService:sidebar"
componentStack: "[ltng:outAppUnstyled] > [embeddedService:sidebar] > [embeddedService:sidebar]"
data: null
handled: false
id: 1174708058
message: "Error in $A.getCallback() [Unexpected end of JSON input]↵Callback 
failed: serviceComponent://ui.embeddedservice.aura.components.controller.SidebarController/ACTION$getDeploymentConfiguration"
name: "SyntaxError"reported: falseseverity: undefinedsf: (9) [d, d, d, d, d, d, d, d, d]stackFrames: (9) [d, d, d, d, d, d, d, d, d]
stackTrace: "Object.eval()@https://xxx.cs123.force.com/components/embeddedService/sidebar.js:30:393"
stacktraceIdGen: "markup://embeddedService:sidebar$Object.eval$Error in $A.getCallback()"stacktraceIdGen
Modifier: nulltf: "serviceComponent://ui.embeddedservice.aura.components.controller.SidebarController/ACTION$getDeploymentConfiguration@markup://embeddedService:sidebar↵Object.eval()@https://guitar-deltak-community.cs123.force.com/components/embeddedService/sidebar.js:30:393"__proto__: 
Error
    at new Aura.externalLibraries (https://static.lightning.force.com/cs123/auraFW/javascript/BcWxSGldKzy83CHM8lFYMg/aura_prod.js:300:363)
    at https://static.lightning.force.com/cs123/auraFW/javascript/BcWxSGldKzy83CHM8lFYMg/aura_prod.js:65:1

Our code looks something like this:
$Lightning.use(
    "embeddedService:sidebarApp",
    function () {
        $Lightning.createComponent(
            "c:HelloWorld",
            document.body,
            function (cmp) {
                console.log("callback");
            }
        );
    },
    “https://xxx.cs123.force.com/application”
);

UPDATE-1:

Here is my lightning web component code:

import { LightningElement, api } from 'lwc';

export default class HellowWorld extends LightningElement {
    @api msg = 'Test!';

clicked() {
        alert("Hi");
    }
}

and my lightning out code is:
$Lightning.use(
    "embeddedService:sidebarApp",
    function () {
        $Lightning.createComponent(
            "c:HelloWorld",
            { msg : "Hi!" },
            document.body,
            function (cmp) {
                console.log("callback");
            }
        );
    },
    “https://xxx.cs123.force.com/application”
);

But still it gives same error on click on the chat button. Just to clarify, the page comes up and we see the snap-in chat as well. The error that I have shared is on click of the chat button.

raj · Answer

We had raised a case with Salesforce on this. It turns out the issue was that we were using $Lightning.use in a VF page that was in different org than where we had enabled the live agent. Apparently both the $Lightning.use and live agent should be in same org for it to work. We tested it and want to confirm this works!

Answered by raj on December 22, 2021

Badbaxx · Answer

Looks like you dont provide param in your input as indicated in the documentation you give and this could explain the error => message: "Error in $A.getCallback() [Unexpected end of JSON input] For a more explicite exemple, you can see Andres Perez exemple

Embedded Service: Problem with Multiple Components on a Web Page with Lightning Out

2 Answers

Add your own answers!

Ask a Question