Importing Modules

Importing Modules into a Cloud Editor Project

Modules enable you to add reusable components to your project, allowing you to focus on the development of your core experience. The 8th Wall Cloud Editor allows you to import modules you own, or modules published by 8th Wall directly into your projects.

To import a module into a Cloud Editor project:

1. Within the Cloud Editor, press the "+" button next to Modules.

2. Select the module that you want to import from the list. Only modules that are 8th Wall hosted project compatible will be available to import. (Learn more about Module Compatibility)

3. Press "Import" to add your module to your project. Take note of the module alias. If you already have a module in your project with the same alias, you may need to rename your module.

4. The module is now visible in your project listed under the "Modules" section.

5. If you select the imported module, you will be taken to the module config page. This page can be used to configure various module parameters.

Once you have added a module to your project you may have to make changes to your code to fully integrate the module. Modules with readmes contain documentation that should be referenced to understand how to integrate the specific module into your project code.

Importing Modules into a Self-Hosted Project

Modules enable you to add reusable components to your project, allowing you to focus on the development of your core experience. You can import modules you own, or modules published by 8th Wall directly into your self-hosted projects.

To import a module into your Self-Hosted project:

1. Within the Cloud Editor, open your Self-Hosted project and press the Module icon in the left navigation:

2. Press "+" or "Import Module" to add an available module to your project.

3. Press "Public Modules" to import a module created by 8th Wall, or "My Modules" to import a module created by a member of your workspace. Only modules that are Self-Hosted project compatible will be available to import. (Learn more about Module Compatibility)

4. Select the module that you want to import from the list.

5. Press "Import" to add your module to your project. Take note of the module alias. If you already have a module in your project with the same alias, you may need to rename your module.

6. You can add up to 10 modules to your Self-Hosted project. These modules will be visible as tabs on the Project Modules page of the 8th Wall Cloud Editor.

7. If you select the imported module, the module configuration details will be displayed. This can be used to configure various module parameters.

8. If you import a module that your team created you will see multiple pinning target options including "Version" (only if the module has been deployed at least once), and "Commit" (allows you to pin the module to any commit of the module code). If you select a "Version" pinning target you can subscribe your imported module to bug fix updates, new feature updates, or disable automatic module updates.

9. Once you have added a module to your project press "Copy Code" and paste the contents of your clipboard into the head.html file of your project. This snippet enables modules to be loaded into your Self-Hosted project with the module config settings you have specified. You will have to re-copy the code snippet and update the head.html of your project whenever you make a change to the module config settings.

10. You may have to make changes to your code to fully integrate the module.