Compass ofrece ahora a su organización la posibilidad de añadir una búsqueda de talleres directamente en su sitio web. Con unas pocas líneas de código (descritas a continuación) añadidas a su sitio web, los participantes potenciales podrán buscar talleres e inscribirse directamente sin salir de su sitio.
Antes de empezar
Tenga en cuenta que esto incrustará una tabla grande y un cuadro de búsqueda en su sitio. Por favor, asegúrese de colocarlo en un área de su sitio que permita un contenedor ancho (preferiblemente 1200px).
Encontrará un ejemplo de la instalación completa aquí: https://www.compasshp.org/find-a-workshop/index.html.
Instalación
En primer lugar, añada el siguiente fragmento de código en la sección de su página en la que desea que aparezca el taller. Todas las opciones disponibles se describen debajo del fragmento.
<div id="compass-app"></div>
<script type="text/javascript">
var compass_options = {
owner_api_key: "[YOUR_OWNER_API_KEY]", /* Optional. See config below. Remove if you are NOT using an Owner API Key. */
partner_api_key: "[YOUR_PARTNER_API_KEY]", /* Optional. See config below. Remove if you are NOT using a Partner API Key. */
ask_address: true,
history_mode: "hash",
request_accommodation: true,
};
</script>
<script type="text/javascript" src="//www.compasshp.org/find-a-workshop/dist/js/app.js"></script>
Configuración
Para configurar la función Buscar un taller, cree un objeto Javascript compass_options. A continuación, puede utilizar las siguientes propiedades para personalizar su instalación.
| Atributo | Descripción |
|---|---|
| clave_api_propietario |
Si usted es una organización estatal que supervisa a todas las organizaciones/socios de su estado, esta es la clave API exclusiva de su entidad. Si proporciona esta clave API, solo se mostrarán los programas y talleres de su organización. Puede localizar su clave API de propietario (si está disponible) aquí: https://www.compasshp.org/in/api-keys |
| clave_api_socio |
Si usted es una organización individual y sólo desea listar sus talleres, puede especificar esta clave. Al proporcionar esta clave API, solo se mostrarán los programas y talleres de su organización. Puede localizar su clave API de propietario (si está disponible) aquí: https://www.compasshp.org/in/api-keys |
| URL_base |
(Opcional) Si está probando la función find-a-workshop y desea apuntar a un entorno distinto del sitio en vivo Compass , puede especificar una URL base diferente. Por ejemplo, puede apuntar al sitio de demostración Compass especificando"https://dev.compasshp.org" en esta opción. Le recomendamos que omita esta opción antes de activar el servicio, de modo que siempre se dirija al sitio web Compass . |
| URL_de_retorno |
(Opcional) Si desea que la función de búsqueda de talleres llame a una URL en su aplicación una vez que el participante se haya inscrito, puede especificar dicha URL aquí. La solicitud contendrá toda la información del participante que se solicitó en el formulario de inscripción, junto con varios elementos adicionales:
|
| preguntar_dob |
(Opcional) Establézcalo como verdadero si desea solicitar la fecha de nacimiento del participante. Este campo no es obligatorio, ya que los participantes nunca tienen que revelar su fecha de nacimiento. El valor por defecto es falso. |
| preguntar_dirección |
(Opcional) Establézcalo en false si no desea solicitar la dirección del participante. El valor por defecto es verdadero. |
| requerir_dirección |
(Opcional) Seleccione false si no desea solicitar la dirección del participante. El valor por defecto es true si ask_address está configurado como true. |
| requerir_email |
(Opcional) Establézcalo en false si no desea solicitar una dirección de correo electrónico cuando se registre un participante. |
| solicitar_alojamiento |
(Opcional) Establezca este valor en true si desea preguntar al usuario si desea solicitar una adaptación. Al usuario se le presentará un sí/no y, si selecciona "Sí", se le presentará un cuadro de texto para preguntarle qué adaptación desea solicitar. |
| mensaje_registro |
(Opcional) Si desea mostrar un mensaje a los posibles participantes, por ejemplo, cómo se utiliza su información, puede especificarlo en este campo. Se permite HTML en este parámetro. La ubicación predeterminada del mensaje es en la parte superior del formulario de inscripción, pero puede colocarse debajo configurando la posición registration_message_position (descrita a continuación). |
| registration_message_position |
(Opcional) Si está mostrando un mensaje de registro (descrito anteriormente), puede especificar arriba o abajo en el parámetro registration_message_position para colocar este mensaje encima o debajo del formulario de registro. El valor por defecto es top. |
| modo_historia |
(Opcional) Hay 2 formas de navegar por el buscador de talleres: hash e historial.
|
Información previa sobre los participantes
Si utiliza un sistema que ya tiene la información del participante en una base de datos, puede rellenar previamente el formulario de inscripción con la información de contacto del participante, para que el usuario no tenga que introducir manualmente esos datos.
<!-- Amend your compass_options object -->
<script type="text/javascript">
var compass_options = {
owner_api_key: "[YOUR_OWNER_API_KEY]",
partner_api_key: "[YOUR_PARTNER_API_KEY]",
history_mode: "hash",
participant: {
organization_participant_id: "12345677ABCDEFG",
first_name: "Michael",
last_name: "Smith",
phone_number: "5188888888",
email: "mike.smith@somewhere.com",
send_email: false,
self_register: true,
address: {
address: "123 Main Street",
city: "Albany",
state: "NY",
zip: 12210
}
}
};
</script>
Configuración
Si utiliza la función Buscar un taller en un sistema que ya gestiona participantes, puede añadir un objeto participante al objeto compass_options y rellenarlo con los campos definidos a continuación.
| Atributo | Descripción |
|---|---|
| organization_participant_id |
Si desea vincular al participante a su sistema, especifique en este campo su ID único para el participante. Se permiten letras, números y algunos caracteres especiales. |
| nombre |
El nombre del participante. |
| apellido |
El apellido del participante. |
| número_teléfono |
Número de teléfono de 10 dígitos. Sólo números. |
| correo electrónico |
Dirección de correo electrónico. Obligatorio si desea enviar un correo electrónico de registro al participante. |
| enviar_email |
Si se proporciona un correo electrónico y se establece en true, se enviará un correo electrónico de registro al participante cuando se registre. |
| autoregistrarse |
Cambia a true si el participante se está registrando por sí mismo. |
| dirección.dirección |
Dirección postal del participante. |
| dirección.ciudad |
Ciudad del participante. |
| dirección.estado |
Estado del participante (¡código de estado de 2 caracteres!). |
| dirección.zip | El código postal de 5 dígitos del participante. |
Personalizar el aspecto
El tema de la búsqueda de talleres está basado en Bootstrap 3. Todos los estilos asociados con el tema se envuelven con el ID del elemento #compass-app. Puedes anular cualquier parte del tema añadiendo CSS que personalice el tema de Bootstrap. Por ejemplo, para cambiar el color de los botones, puedes aplicar CSS de la siguiente manera:
<style type="text/css">
#compass-app .btn.btn-primary {
background-color: #204d74;
border-color: #122b40;
}
#compass-app .btn.btn-info {
background-color: #269abc;
border-color: #1b6d85;
}
#compass-app .btn.btn-danger {
background-color: #269abc;
border-color: #1b6d85;
}
</style>
Todos los estilos pueden anularse simplemente envolviendo la declaración CSS con #compass-app. Solo tienes que inspeccionar el elemento, buscar la clase CSS y personalizarlo.
