Skip to main content Join us at TDX in San Francisco or on Salesforce+ on March 5-6 for the Developer Conference for the AI Agent Era. Register now.

#LWR0 discussing

Idea Exchange Post - Experience Builder Rich Content Editor Enhancements

 

EDIT: The idea I posted got merged with an existing one. I've posted both URLs, but there is only one you can vote on now.

 

New URL (can vote on this one)

https://ideas.salesforce.com/s/idea/a0B8W00000QcUVDUA3/lwr-rich-content-editor-component-should-allow-us-to-use-theme-styles

 

Old URL (this is now archived)

https://ideas.salesforce.com/s/idea/a0B8W00000Qen1SUAR/experience-builder-rich-content-editor-enhancements

 

--- previous post ---

 

Hi everyone, I've added an idea to Idea Exchange to enhance Experience Builder's Rich Content Editor component. It feels very outdated and is missing a lot of features. If you could take a look and upvote if you agree that would be wonderful!

 

Here's what's in the idea:

 

Color Picker

  • Theme Colors: Include colors from theme settings, similar to PowerPoint, where theme colors are shown with various shades in the color picker.
  • Manual Color Selection: Allow manual color selection using color codes like hex, rgba, etc.

Fonts

  • Theme Fonts: Offer fonts from the theme settings as default options in the font selector.
  • Full Font Selection: Allow us to choose from all fonts available in the theme settings.

Heading Levels & HTML Semantics

  • Heading Levels: The LWR version currently allows only font size selection, not heading levels, which removes semantics and accessibility from the text. Please bring back the option to select heading levels.
  • Content Record Semantics: When content with heading levels is saved in a CMS content record, those semantics are stripped out in the Experience Builder’s rich content field. This should be fixed.

Images

  • Allow images pasted into the editor to stay visible after exiting the editor. Currently, pasted images disappear once you leave the editor.

Markdown Support

  • Enable markdown syntax formatting to streamline adding structure to content. This would also require bringing back HTML semantics for full compatibility.

Links

  • Include expressions in the “Add a Link” modal, allowing users to easily link to specific pages within the site without manually entering the full URL.

Merge Fields

  • Add a menu button to insert merge fields, making it easier to display dynamic content without memorizing expressions.

Code View

  • Offer a code view mode to allow basic HTML elements for enhanced content customization—this is a standard feature on many CMS platforms.

#Experience Cloud #IdeaExchange #LWR

0/9000

Learn More About: LWC Local Dev  

 

The beta of LWC Local Dev was one of the biggest announcements for developers at #Dreamforce2024. With Local Dev you can get a preview of your components just by saving your code, which makes you a much more productive developer. 

 

This means that you can save 3-10 seconds of wait time per component update, and when you spend days working on an #LWC development, this quickly adds up to hours saved.

 

Local Dev works across various Salesforce containers, such as Lightning Experience, #LWR sites for @* Experience Cloud *, and the Salesforce mobile app.

 

To learn more about this feature and how it works behind the scenes, check out these great resources from Developer Advocate @Alba Rivas:

📽 Watch a video

📖 Read a blog

 

If you have feedback or questions about Local Dev, post them in the @LWC group, using #LWC Local Development tag.

Learn More About: LWC Local Dev The beta of LWC Local Dev was one of the biggest announcements for developers at .

3 comments
0/9000

How to identify and load the guest cart items in LWR b2b sites ?

We cannot rely on a common account ID to fetch cart items. This will lead to bad user experience.

Any assistance would be greatly appreciated

#B2B Commerce #LWR
1 answer
  1. Sep 22, 2024, 6:23 PM

    Hi @Gnanesh Challa,

     

    you can consider using browser-based tracking methods like cookies or local storage. 

     

    1. Generate a unique session ID for each guest user when they first add an item to the cart.

    2. Store the session ID in a cookie or local storage in the user's browser. When the user interacts with the cart, use this session ID to retrieve the cart items from your backend, ensuring each guest has a unique experience.

    3. Ensure the session persists until the cart is checked out or abandoned. This way, the experience remains consistent without relying on a common account ID. If the user later registers or logs in, you can link this guest session to their newly created account.

     

    Make sure to handle session expiry and data privacy properly to avoid potential issues. This method should help with your task.

0/9000

I am trying to open a Messaging for In-App and Web chat programmatically, and I see that there may be some methods to do so, particularly embeddedservice_bootstrap.utilAPI methods such as:

embeddedservice_bootstrap.utilAPI.showChatButton()

The documentation shows what looks like a set up where the MIAW chat is added to a conventional website. However, I am trying to utilize these methods on an LWR site and have been unable to. Has anyone been able to pull this off? If so, how? I'm not sure what I am missing here.

 

#LWR

 

#Chat #Live Agent Web Chat #Embedded Service

5 answers
  1. Jul 2, 2024, 6:41 PM

    I found the answer for this:

     

    In order to open a MIAW chat button programmatically, in my case via a button placed elsewhere on the page, you will need to use a javascript event. To be clear, you will be using the event conventionally, not in the method described here which would be more helpful in communicating one LWC to another. The MIAW chat is not an LWC itself, but the prechat is, so that made it so that I had to use a conventional JS event.

     

    1. Go to your desired site and drop in the Embedded Messaging component with your MIAW chat that you want to use in the Experience Builder.

    2. In the left side main menu, click Settings > Advanced > Edit Head Markup.

    3. In the Head Markup editor, add a simple listener like so: 

    document.addEventListener('launchMIAWChat', function(e){	embeddedservice_bootstrap.utilAPI.launchChat();});

    4. Click Save.

    5. Create an LWC that holds the button you want to use to trigger the chat. 

    6. Make it so that button calls a method in the LWC JS file when clicked.

    7. Within the method that gets triggered on click, dispatch a JS event to the document object that has a value that matches the value your listener is listening for. Make sure to double check this since this is an easy area to make a mistake that keeps the whole thing from working:

    document.dispatchEvent(new CustomEvent("launchMIAWChat"));

    8. Save and deploy to the org.

    9. Add the button LWC to your page.

    10. You should now be able to click and have the chat open right up whether it is hidden or not.

0/9000

Experience Cloud: Show Me How - How to Design Beautiful, Responsive Websites With Salesforce Experience Cloud.

 

Hi everyone! I'm pretty excited because I get to present my first Show Me How webinar tomorrow, July 25, at 9am PDT / 12pm EST. In this webinar I'll be showcasing a web page that was designed with Enhanced LWR Experience Builder, and demonstrating how I was able to create it. This web page was built exclusively with standard components using no custom web components, no custom HTML, and no AppExchange products. If you haven't worked with LWR very much, or are just interested to see what you can do with it, this would be a great webinar to attend.

 

Ask an Expert: Experience Cloud Show Me How

Date/Time: July 25  9:00 AM PDT / 12:00 PM EDT

Format: Virtual, Live Q&A

Register Here: https://cs.salesforce.com/events/7013y000002q79hAAA

Experience Cloud: Show Me How - How to Design Beautiful, Responsive Websites With Salesforce Experience Cloud.@*Experience Cloud Developers* @Salesforce.org Experience Cloud #Experience Cloud #LWR #Digital Experience

4 comments
  1. Aug 16, 2024, 6:54 PM

    Hi all! I've got a followup article that was recently published on Salesforce Ben which covers some of the neat things you can do with the Columns component. The article uses the same demo website shown in the Show Me How episode, and it goes into more detail about how to achieve the layouts you see in the website. 

     

    https://www.salesforceben.com/how-to-use-salesforce-experience-builders-columns-component-like-a-pro/

     

    If anyone has any questions about how to get similar layouts for your website, don't hesitate to reach out! I'm happy to help.

0/9000

I have added Favicon icon in LWR template via this step: -

 Site Administration tab -> Pages -> Go to Force.com -> Site Favicon Icon.

But it is not reflected on published site...

What is the way to display favicon icon for Experience site?

 

#Experience Site  #Experience Cloud  #LWR

4 answers
  1. Mohit Kumar Agarwal (Dell Technologies) Forum Ambassador
    Aug 6, 2024, 8:46 AM
0/9000

I am looking to create an LWR site where I can have some knowledge articles and allow unauthenticated users (customers) to view specific knowledge articles that are available to the public; the articles have a file related to them that the customer should be able to download.

 

I know there is no LWR related list yet, but hypothetically if i built one, is there a way to allow a guest user to download files that are related to a Knowledge Article?

 

#LWR @* Salesforce Developers * 

8 answers
  1. Jul 30, 2024, 3:12 PM

    Without sharing should work in both flow an apex - if it doesn't to me it's a bug and there should be a support case to look into it.

0/9000

I have CSS file with name markup in the Static Resource.

and i am applying this as a reference in the Head Markup of LWR site as below :-

 

<link rel="stylesheet" href="{ basePath }/sfsites/c/resource/markup?{ versionKey }"/>

 But still it's not works, please guide me...

#LWR

#Experience Cloud

#Salesforce Developer

#Digital Experience Platforms

10 answers
  1. Apr 26, 2024, 10:43 AM

    Hello,

     

    We are facing same issue, tried all above solutions but nothing works. Do we have solution?

     

    Thanks

0/9000

Hi Experts

Need your quick help. We are working on a Experience site built on LWR... Created a LWC component which will fetch a image from CMS and display on the page with few more details..

The component is working fine in Aura template, however not working in LWR even with required changes to the code..

 

Getting following error "You don't have access to this channel."

 

Please help... team is stuck

#Experience Cloud #LWR

2 answers
  1. Mar 29, 2024, 11:24 AM

    When working with Salesforce CMS Content (Managed Content Object) and attempting to retrieve content using Apex, you may encounter this error when utilizing methods from the ManagedContent class methods such as getManagedContentByContentKeys or getManagedContentByIds

     

    ConnectApi.ConnectApiException:[errorCode=INSUFFICIENT_ACCESS]: "You don't have access to this channel."

    This error occurs because of the ConnectAPI.ManagedContent is designed for regular workspace APIs. For enhanced workspaces (and channels), you should use the ConnectAPI.ManagedContentDelivery class instead.

     

    Here's an example of Lightning Web Components (LWC) to display CMS Content (Collection) as an accordion on a public Lightning Web Runtime (LWR) site, leveraging the ConnectAPI.ManagedContentDelivery class. 

     

    https://sfcrunch.com/salesforce-lwc-to-show-cms-content-collection-as-accordion-on-public-lwr-site-using-connectapi-managedcontentdelivery-class/

0/9000