There are 2 shortcodes available to display the configurator: one inserts a button to open the configurator as a modal, the other inserts the configurator in the content.
[mkl_configurator_button]
This shortcode adds a button. Example:
[mkl_configurator_button product_id=1 classes="button primary"] or [mkl_configurator_button product_id=1 classes="button primary"]Button name[/mkl_configurator_button]
Parameters:
product_id The ID of the configurable product. Only required when using the shortcode on a page different from the product page.
classes HTML classes to add to the button.
tag the tag used for the trigger. Options: link, a, button. Default is button. (link and a both output a <a> tag).
[mkl_configurator]
This shortcode inserts the configurator in the content (inline).
[mkl_configurator product_id=1 classes="container-class something-else"]
Parameters:
product_id The ID of the configurable product. Only required when using the shortcode on a page different from the product page.
classes HTML classes which will be added to the configurator.
Troubleshooting
When adding a shortcode somewhere else than the product itself, there is a chance that the shortcode doesn’t work out of the box. If the button or the loading screen displays, but nothing more happens, it is usually because it is not detected on the page, which prevents the required scripts from being loaded.
Read this article to force loading the scripts on other pages and fix this issue.