# Configure the Experience

An app can be configured to exist as an embed within a written article, rather like a widget. But you can also set the same app to display full page with its header and footer. 

This section covers the available options:

* [#manage-dynamic-sizing](#manage-dynamic-sizing "mention")
* [#respond-to-resizing](#respond-to-resizing "mention")
* [#launch-a-specific-event](#launch-a-specific-event "mention")
* [#provide-custom-parameters](#provide-custom-parameters "mention")
* [#loading-and-error-views](#loading-and-error-views "mention")
* [#customise-loading-timeout](#customise-loading-timeout "mention")
* [#customise-background](#customise-background "mention")
* [#show-or-hide-the-apps-header-and-footer](#show-or-hide-the-apps-header-and-footer "mention")
* [#launch-links-with-blank-target-to-browser](#launch-links-with-blank-target-to-browser "mention")
* [#allows-popup-behaviour-in-experience](#allows-popup-behaviour-in-experience "mention")

***

### **Manage Dynamic Sizing**

By default, the SDK will respect the height specified within your application and display a scrollbar when necessary so the user can navigate the full content.

However, the SDK can automatically manage the height of the view for you, by respecting the width set and updating the height to match that of the content in the app:

<pre class="language-kotlin"><code class="lang-kotlin">val config = ExperienceConfiguration(
<strong>    autoresizesHeight = true
</strong>)

Launcher.default.getExperience(context, config)
...
</code></pre>

### Respond to Resizing

Additionally, the SDK lets you listen to changes in the intrinsic size of the web page, so you can handle the resize with your preferred approach:

```kotlin
class ExperienceListener : ExperienceViewListener {
  override fun onIntrinsicSizeChanged(
      experienceView: ExperienceView, 
      width: Float, 
      height: Float
  ) {
    // Here you can update your size as needed
  }
}

Launcher
    .default
    .getExperience(context, config)
    .apply {
        listener = ExperienceViewListener()
    }
```

### **Launch a Specific Event**

By default, the SDK will launch the app without specifying a specific event and will use the project's default Event.

If you want to launch to a specific event, you can do so by specifying the Event ID using the example below. To retrieve and determine the event you want, refer to [getting-and-displaying-events](https://products.monterosa.co/mic/developer-guide/building-apps/core-sdk-functions/getting-and-displaying-events "mention")

<pre class="language-kotlin"><code class="lang-kotlin">val config = ExperienceConfiguration(
<strong>    eventId = "&#x3C;event id>"
</strong>)

Launcher.default.getExperience(context, config)
...
</code></pre>

### **Provide Custom Parameters**

The SDK allows you to provide custom query parameters in LauncherKit to customise the app you embed. How the app responds depends on how it was created so this is general feature available for developers.&#x20;

You can use it as follows:&#x20;

<pre class="language-kotlin"><code class="lang-kotlin">val config = ExperienceConfiguration(
<strong>    parameters = hashMapOf("customKey" to "customValue")
</strong>)

Launcher.default.getExperience(context,config)
...
</code></pre>

### **Loading and Error Views**

By default, the SDK will use the loading view from the app itself. You can enable a custom loading / error view by setting `supportsLoadingState` to true.

{% hint style="info" %}
Loading and error views are **not** supported when using the `ExperienceActivity` and `ExperienceFragment` classes rather than `ExperienceView` as we can't parcelise the view providers.

Use instead an `ExperienceView` or wrap it with your own Activity or Fragment.
{% endhint %}

<pre class="language-kotlin"><code class="lang-kotlin">val config = ExperienceConfiguration(
<strong>    supportsLoadingState = true
</strong>)

Launcher.default.getExperience(context, config)
...
</code></pre>

When enabled, a simple black-on-white loading screen is displayed so as to avoid having a blank screen whilst the app is loaded.

You can customise these views by passing via ExperienceConfiguration a `ViewProvider`, which is responsible to create a view to display instead of the default loading/error views.

{% tabs %}
{% tab title="Compose" %}

<pre class="language-kotlin"><code class="lang-kotlin">@Composable
fun Experience() {
    ...
    val config = ExperienceConfiguration(
        loadingViewProvider = { 
<strong>            composeViewWrapper(context) {
</strong><strong>                LoadingView()
</strong><strong>            }
</strong>        },
        errorViewProvider = { errorMessage -> 
<strong>            composeViewWrapper(context) {
</strong><strong>                ErrorView(errorMessage)
</strong><strong>            }
</strong>        }
    )
    
    Launcher.default.getExperience(context, config)
}

fun composeViewWrapper(
    context: Context,
    content: @Composable () -> Unit
): ComposeView = ComposeView(context)
    .apply {
        setContent { content() }
    }
    
@Composable
fun LoadingView() {
    ...
}

@Composable
fun ErrorView(
    error: String?
) {
    ...
}
</code></pre>

{% endtab %}

{% tab title="Views" %}

<pre class="language-kotlin"><code class="lang-kotlin">...
override fun onCreate(savedInstanceState: Bundle?) {
<strong>    val loadingView = View.inflate(context, R.layout.loading_view, null)
</strong><strong>    val errorView = View.inflate(context, R.layout.loading_view, null)
</strong>    
    val config = ExperienceConfiguration(
<strong>        loadingViewProvider = { loadingView },
</strong><strong>        errorViewProvider = { errorMessage -> errorView }
</strong>    )
    
    Launcher.default.getExperience(context, config)
}
...
</code></pre>

{% endtab %}
{% endtabs %}

### Customise Loading Timeout

To customise how long the loading view is displayed before transitioning to either the main app view or an error view, you can specify a timeout parameter in your `ExperienceConfiguration`.

<pre class="language-kotlin"><code class="lang-kotlin">val config = ExperienceConfiguration(
<strong>    dismissLoadingViewTimeout = 10.seconds
</strong>)

Launcher.default.getExperience(context, config)
...
</code></pre>

### Customise Background

To customise the background during the loading of the experience, add a background colour parameter to your `ExperienceConfiguration`. This optional setting lets you modify the webview's background appearance. If not specified, the system default will be used.

<pre class="language-kotlin"><code class="lang-kotlin">import android.graphics.Color

val config = ExperienceConfiguration(
<strong>  backgroundColor = Color.BLACK
</strong>)

Launcher.default.getExperience(context, config)
...
</code></pre>

### **Show or hide the app's header and footer**

By default, the SDK assumes that the *parent* application will be displaying its own header and footer, and therefore we hide the app's default header if one exists. You can override this behaviour and present the header and footer of the app by using the following snippet:

<pre class="language-kotlin"><code class="lang-kotlin">val config = ExperienceConfiguration(
<strong>  hidesHeadersAndFooters = false
</strong>)

Launcher.default.getExperience(context, config)
...
</code></pre>

### **Launch Links with Blank Target To Browser**

By default, the SDK does not open hyperlinks externally in the web browser. You can override this behaviour and allow for any link containing the blank target to open in an external app by using the following snippet:

<pre class="language-kotlin"><code class="lang-kotlin">val config = ExperienceConfiguration(
<strong>  launchesURLsWithBlankTargetToChrome = true
</strong>)

Launcher.default.getExperience(context, config)
...
</code></pre>

### Allows Popup Behaviour in Experience

You can allow display of popup windows within your Experience, ideal for situations needing secondary windows. These are triggered by the JavaScript `window.open()` function or a similar method. Ensure these popups are properly closed and, if necessary, facilitate data transfer back to the main Experience.

<pre class="language-kotlin"><code class="lang-kotlin">val config = ExperienceConfiguration(
<strong>  allowsPopupBehaviour = true
</strong>)

Launcher.default.getExperience(context, config)
...
</code></pre>