0

I'm trying to set up a modal that opens on page load, the first time a user accesses the site. The form is simple and will have two buttons:

Are you an agent? Yes No

If yes, the content on the page will be revealed. If no, they'll be redirected to another page.

I tried coding out a JS solution in the Settings > Advanced > Edit Head Markup.

I also tried installing the PopUp component, but I get the following error when I utilize that component:

Something went wrong

Try refreshing the page. If that doesn't do the trick, give your Salesforce administrator the following error ID, and describe what you were trying to accomplish. Error ID: 0 This page has an error. You might just need to refresh it. [play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD]

3
  • I've been researching this for days, doing dozens of searches, reading articles, etc., but haven't been able to find an answer. So I stumble upon this forum and post what I think is a well though-out question, but already got a minus. I'm not sure how I'm supposed to learn.
    – linnse
    Jun 29, 2023 at 3:20
  • What a site did you mean? Jun 30, 2023 at 7:02
  • Salesforce CMS site user Builder.
    – linnse
    Jul 1, 2023 at 18:18

1 Answer 1

0

I am not very sure on what do you mean with this:

the first time a user accesses the site

But, I have made a simple Lightning Web Component (LWC), which will block out a record page content, with a modal. It will show the record only, if you click "Yes" and some other logic (to be added as per requirement), when "No" is clicked.

Something like this: enter image description here

So everytime, you open a record where this component is placed, it will show a modal first, asking if you are an agent or not, if user clicks yes, then can view the record, if user click no, you can add any custom logic as per your requirements.

You can create a new lightning-web-component, with the following JS, HTML, CSS and XML file.

Javascript

import { LightningElement } from 'lwc';

export default class PopOut extends LightningElement {

showPop;

connectedCallback(){
    this.showPop = true;
}

showPage(){
    this.showPop = false;
}

navigateAway(){ // write your custom logic here :)

}


}

HTML

<template>
<template lwc:if={showPop}>
    <section role="dialog" tabindex="-1" aria-modal="true" aria-labelledby="modal-heading-01" class="slds-modal slds-fade-in-open">
        <div class="slds-modal__container">
            <div class="slds-modal__header">
                <h1 id="modal-heading-01" class="slds-modal__title slds-hyphenate">Are you an agent?</h1>
            </div>

            <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                <p>Please click "Yes" only if you are an agent, else click "No".</p>
            </div>
            <div class="slds-modal__footer">
                <button class="slds-button slds-button_neutral" aria-label="Yes" onclick={showPage}>Yes</button>
                <button class="slds-button slds-button_brand" onclick={navigateAway}>No</button>
            </div>
        </div>
    </section>
    <div class="slds-backdrop slds-backdrop_open" role="presentation"></div>
</template>
</template>

CSS

:host{
    --slds-c-backdrop-color-background: rgb(164, 164, 164);
}

XML

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

I have exposed this to a RecordPage in my XML and once this is deployed, I just drag and drop this component on any RecordPage, like the image below:

enter image description here

Hope it helps and answers your question! :D The code above is just an example, feel free to add more code and follow best practices :)

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .