Configurer l’instance du composant d’admission Playbook

  • Rversion finale: Australia
  • Mis à jour 12 mars 2026
  • 5 minutes de lecture
  • Configurez l’instance du composant d’admission Playbook afin que vos utilisateurs puissent l’intégrer sur leur site web et soumettre des tickets à l’aide de l’expérience guidée Playbook directement à partir de leur site web.

    Avant de commencer

    Vous devez disposer de la configuration suivante pour configurer l’instance du composant d’admission de playbook :

    Rôle requis : sn_embeddable_core.emb_admin

    Procédure

    1. Accédez à la Tous > Intégrables Web > Page d'accueil.
    2. Sur la page d’accueil, sélectionnez Créer un module ou utilisez le module existant.
      Pour plus d’informations sur la création d’un nouveau module, reportez-vous à la section Créer un module.
    3. Sur la page du module, dans l’onglet Composants, ajoutez une instance du composant d’admission Playbook à un groupe existant ou nouveau.
      Pour plus d’informations sur la création d’un groupe, puis sur l’ajout d’une instance de composant, reportez-vous à la section Créer un groupe et ajouter une instance de composant.
    4. Facultatif : Activez l’option Afficher l’aperçu statique pour afficher une représentation visuelle d’un composant lorsqu’un aperçu en direct n’est pas disponible.
      Remarque :
      Lorsque cette option est activée, les changements apportés aux propriétés globales ou aux propriétés de composant n’apparaissent pas dans l’onglet Aperçu en temps réel.
    5. Configurez les propriétés de l’instance du composant d’admission de playbook.
      • L’onglet Aperçu affiche des données en temps réel en fonction des choix définis dans les propriétés du composant.
      • Pour obtenir une description des propriétés du composant d’admission de playbook, reportez-vous à la section Propriétés du composant pour l’admission Playbook.
    6. Sélectionnez l’onglet Règles CORS pour configurer les règles CORS.
    7. Sélectionnez l’onglet Composants .
      Si un message s’affiche sur le périmètre de l’application, remplacez le périmètre par Composants Web pour que le Service clientèle puisse modifier l’enregistrement.
    8. Sélectionnez l’option Obtenir le code intégré.
      Une fenêtre contextuelle apparaît pour afficher à la fois le code global et le code de composant.
    9. Dans l’onglet Code global, examinez le code généré et sélectionnez Copier le code global.
      Le code global ne doit être ajouté qu’une seule fois à votre page Web tierce.
      import { init, login, logout, startGuestSession } from 'https://demo.servicenow.com/uxasset/externals/sn_embeddable_core/index.jsdbx';
      
      await init({
          theme: 'fad87d2ca304121029a4d1aed31e610f',  /* sys_id of the theme to use for the embeddable components in your website */
          baseURL: 'https://demo.servicenow.com', /* Base URL of the instance to be used for the embeddable components in your website */
          authCallback: getTokenCallBack, /* Function which returns the auth token for the current user, required for auth setup */
          module: '591800ffc1243610f87714367ed47c6a', /* Demo module */
          pageName: document.title, /* Uses the browser's document title as the page name in User analytics experience */
          guestTokenCallback: getGuestJWTTokenCallBack, /* Function which returns the guest token for the current user, required for guest validation setup */
          cacheComponents: [] /* Pre-caches resources for improved performance. Update component list as per your usage */
      });
      
      function getTokenCallBack() {
          var idToken; /* Get the id token for the current user */
          return Promise.resolve(idToken);
      }
      
      function getGuestJWTTokenCallBack() {
          var guestToken; /* Get the guest token for the current user */
          return Promise.resolve(guestToken);
      }
      
      /* Uncomment below function to handle guest session */
      // await startGuestSession();
      
      /* Uncomment below functions to handle login and logout once the user logs into your website */
      // await login();
      // await logout();
    10. Facultatif : Dans l’onglet Code de composant, faites glisser le commutateur Activer le gestionnaire d’événements pour gérer les événements déclenchés par les interactions de l’utilisateur sur le site Web.
      Remarque :
      L’activation du gestionnaire d’événements modifie également le code de composant. Pour plus d’informations sur les gestionnaires d’événements dans , reportez-vous Gestionnaire d’événements dans le composant d’admission Playbookà Intégrable au web.
    11. Dans l’onglet Code de composant, examinez le code généré et sélectionnez Copier le code de composant.
      Le code de composant généré comprend également des configurations pour les gestionnaires d’événements.
      <!--  
          Module: Demo module
          Group: Group 1
          Instance: Playbook intake 1
      -->
      <sn-embedx-playbook-intake
      	table="sn_onboarding_case"
      	sys-id="-1"
      	playbook-title="Create case with playbook"
      	stage-orientation="horizontal"
      	max-visible-stages="5"
      	activity-view-mode="focused"
      	playbook-experience="0d71033773f220109edbc1f52ff6a741"
      	record-generator="494435eb53a231103466ddeeff7b12e0"
      	confirmation-text="Case submitted successfully!"
      	confirmation-sub-text="Estimated resolution in 24 hours"
      	reference-number-label="Reference Number :"
      	primary-button-label="View details"
      	secondary-button-label="Browse services">
      </sn-embedx-playbook-intake>
      <!--
       The component also includes the following additional properties:
       hide-stages
       hide-errors
       hide-reference-number
       hide-primary-button
       hide-secondary-button
       hide-record-created-confirmation
       prefill-fields
      -->
      
      <script type="module">
      	import { getEmbeddables, setEvents, setProperties } from 'https://demo.servicenow.com/uxasset/externals/sn_embeddable_core/index.jsdbx';
      	
      	const snEmbedxPlaybookIntake = document.querySelector('sn-embedx-playbook-intake');
      
      	/* Uncomment this code for the default behaviour of the Playbook intake component.
      
      	// Get the table, playbook title, record generator and pre-fill fields from the current URL
      	const currentURL = new URL(window.location.href);
      	const urlParams = new URLSearchParams(currentURL.search);
      	const tableName = urlParams.get('emb_table');
      	const playbookTitle = urlParams.get('emb_playbook_title');
      	const recordGenerator = urlParams.get('emb_record_generator');
      	const prefillFields = urlParams.get('emb_prefill_fields');
      
      	// Update the properties of the componentProperties object
      	setProperties(snEmbedxPlaybookIntake,{table: tableName,recordGenerator:recordGenerator,playbookTitle:playbookTitle,prefillFields:prefillFields});
      	*/
      
      	getEmbeddables(["sn-embedx-playbook-intake"]);
      
      	const eventHandlers = {
      		'SN_EMBEDX_PLAYBOOK_INTAKE#COMPONENT_READY' : (e) => {
      			// This event is dispatched when a component is ready and usable.
      		},
      		'SN_EMBEDX_PLAYBOOK_INTAKE#COMPONENT_ERROR' : (e) => {
      			// This event is dispatched when a property validation or internal error occurs.
      			var {errorType, errorMessage} = e.detail.payload;
      			console.log(errorType, errorMessage);
      		},
      		'SN_EMBEDX_PLAYBOOK_INTAKE#RECORD_CREATION_SUCCEEDED' : (e) => {
      			// Dispatched when a record is created by a Record Generator Playbook.
      			var {table, sysId, number, playbook_experience_id, hide_record_creation} = e.detail.payload;
      			if(hide_record_creation){
      				var primaryURL =  '/caseview'; // Replace with the URL of the case view page
      
      				// Construct the URL for the Case View component with URL parameters
      				const caseViewURL = primaryURL + '?emb_table=' + table + '&emb_recordid=' + sysId + (playbook_experience_id === '98e09a560f2200102920c912d4767e1a' ? '' : '&emb_playbook_experience=' + playbook_experience_id);
      				open(caseViewURL,'_self'); // Open case record when record created confirmation is hidden
      			}
      		},
      		'SN_EMBEDX_PLAYBOOK_INTAKE#PRIMARY_BUTTON_CLICKED' : (e) => {
      			// This event is dispatched when primary button is clicked on the record created confirmation page.
      			var {table, record_sys_id, playbook_experience_id} = e.detail.payload;
      			var primaryURL =  '/caseview'; // Replace with the URL of the case view page
      
      			// Construct the URL for the Case View component with URL parameters
      			const caseViewURL = primaryURL + '?emb_table=' + table + '&emb_recordid=' + record_sys_id + (playbook_experience_id === '98e09a560f2200102920c912d4767e1a' ? '' : '&emb_playbook_experience=' + playbook_experience_id);
      			open(caseViewURL,'_self'); // Open case record when primary button is clicked
      			
      		},
      		'SN_EMBEDX_PLAYBOOK_INTAKE#SECONDARY_BUTTON_CLICKED' : (e) => {
      			// This event is dispatched when secondary button is clicked on the record created confirmation page.
      			var {table, record_sys_id} = e.detail.payload;
      			var secondaryURL =  '/browse'; // Replace with the URL of the secondary page
      
      			// Open the Case View component in the same tab
      			open(secondaryURL,'_self');
      			
      		}
      	};
      
      	setEvents(snEmbedxPlaybookIntake, eventHandlers);
      </script>
      

    Résultats

    Les codes globaux et de composant sont prêts à être partagés avec l’administrateur tiers pour intégrer l’instance du composant d’admission de playbook sur son site Web tiers.

    Que faire ensuite

    Incorporer l’instance du composant d’admission de playbook sur le site Web du tiers