Blog posts by nahid-bs232024-08-27T12:05:58.0000000Zhttps://world.optimizely.com/blogs/nahid-bs23/Optimizely WorldIntegrate Chat (Tidio) Functionality in Episerver CMS<p>It is quite fundamental for every website owner in today’s world to place a live chat option on his/her site since customers can ask questions in real time and concerns can be received promptly.</p>
<p><strong>Tidio</strong>, a live chat system, stands out because it is simple to operate, has a good array of abilities, and is easy to incorporate. In this blog post, we’ll integrate Tidio chat into your Episerver CMS website.</p>
<p><br /><strong>Step 1: Create an Account in Tidio</strong></p>
<p>The incorporation of Tidio into the Espreserver CMS is quite simple however before proceeding to do so a user must sign up for an account.</p>
<ul>
<li>Go to the Webpage of Tidio: Navigate to https://www.tidio.com/, and on the top right, click on ‘Get Started’</li>
</ul>
<p> <img src="/link/d309f463ab53484ba4d0ae7fab055cd0.aspx" width="865" alt="Tidio " height="326" style="display: block; margin-left: auto; margin-right: auto;" /></p>
<ul>
<li>Create your account: To create your account, adhere to the on-screen directions. For a quicker setup, social logins are another option. If you’re a developer and you don’t have a published website then just give a dummy website URL and create an account</li>
</ul>
<p> <img src="/link/a4290106bbbe49f585be53aca598d72f.aspx" width="861" alt="Tidio Account" height="461" style="display: block; margin-left: auto; margin-right: auto;" /></p>
<ul>
<li>Personalize your Tidio widget: After you have set up an account, you will be required to customize a chat widget for your website. Tailor it to suit your site's blogs and layout.</li>
</ul>
<p><strong>Step 2: Copy the JavaScript Code of Tidio</strong></p>
<p>As soon as your Tidio account has been established, and the installation of your chat widget has been completed, the subsequent thing to do is to get the javascript code snippet that is to be inserted into the Episerver CMS.</p>
<p>To access the installation code, Click on the “<strong>Settings</strong>” tab in your Tidio dashboard. Next, find and click on “<strong>Live chat</strong>” option and then go to “<strong>Installation</strong>”. In there, you’ll find the “<strong>Manual Install</strong>” tab. Click on this and you will find the javascript code snippet. Copy the code which we’ll use later in the Episerver cms site footer section</p>
<p> <img src="/link/a1871354a7f04000bc79eb211ec8094b.aspx" width="893" alt="Tidio Setup" height="524" style="display: block; margin-left: auto; margin-right: auto;" /></p>
<p><strong>Step 3: Integrate Tidio with Episerver CMS</strong></p>
<p>Now that you have the Tidio JavaScript code, it’s time to integrate it into your Episerver CMS website.</p>
<p>Find the main layout file of your website. This is usually where you want to add third-party scripts, as it ensures the script is loaded on all pages. For simplicity, I’m using the Alloy theme and adding it in the <strong>Root.cshtml</strong> file. Note that This placement is recommended to ensure that the script loads after all other content, reducing the risk of blocking page rendering.</p>
<p><img src="/link/b80420e4a9164ae993078b99be37f7cb.aspx" width="653" alt="" height="365" style="display: block; margin-left: auto; margin-right: auto;" /></p>
<p><strong>Step 4: Test the Integration</strong></p>
<p>After updating the changes, it’s essential to test if the Tidio chat widget is working correctly</p>
<p><img src="/link/3662decb1e324020b5a5db01d30c5ac9.aspx" width="817" alt="" height="413" style="display: block; margin-left: auto; margin-right: auto;" /></p>
<p><strong>Step 5: Customize the Chat Widget (Optional)</strong></p>
<p>You can further customize the Tidio chat widget to match your website’s design and branding.</p>
<p><strong>Conclusion</strong></p>
<p>Integrating Tidio with your Episerver CMS site is a straightforward process that can significantly enhance your user interaction and customer service capabilities. With just a few steps, you can have a fully functional live chat widget that helps you engage with your visitors in real-time.</p>
<p>By leveraging Tidio's features, you can offer quick support, improve customer satisfaction, and ultimately drive more conversions. Happy chatting!</p>2024-08-27T12:05:58.0000000ZBlog postCreating Custom Feed Options for Optimizely Forms Selection Elements<p>Optimizely Forms is a versatile tool for building forms used in registrations, job applications, surveys, and much more. These forms can include a variety of elements like text boxes, selection lists, date pickers, and range sliders, and so on. Regarding selection elements, Optimizely provides a built-in manual choice option where you can manually insert choices, also known as feeds.</p>
<p>However, there are scenarios where you might want to populate these choices dynamically. This could be from a hardcoded list or via an API, rather than manually inputting each option. In this blog post, we’ll explore how to create a custom feed option for selection elements in Optimizely Forms, allowing you to dynamically generate choice items tailored to your specific needs. </p>
<p>First, to create a custom feed option for a selection element in Optimizely Forms, we need to implement a feed class that adheres to the <strong>IFeed</strong> and <strong>IUEntityInEditView</strong> interfaces. This custom feed class will be responsible for dynamically generating the choice items displayed in the selection element.</p>
<p>In this implementation, the <strong>LoadItems</strong> method will be responsible for providing the list items. For simplicity, we will use a static list containing a set of companies. However, you can easily replace this with an API call or any other data source that suits your needs.</p>
<p>Here, The <strong>Id</strong> property in the feed class acts as the unique identifier for the feed, and the <strong>Description</strong> property, which you should set in the field, will appear as the display name for this feed in the Optimizely Forms UI.</p>
<p>To ensure that your custom feed is recognized by Optimizely Forms, you need to register it as a feed service type using the <strong>ServiceConfiguration</strong> attribute in the class definition.</p>
<pre class="language-csharp"><code>[ServiceConfiguration(ServiceType = typeof(IFeed))]
public class CompanyFeed : IFeed, IUIEntityInEditView
{
// Unique identifier for the feed
public string ID => "13b098f3-f960-4465-9cfd-77db88486921";
// Display name for the feed
public string Description { get; set; } = "Company List";
// Extra configuration options (optional)
public string ExtraConfiguration { get; }
// Friendly title for the edit view
public string EditViewFriendlyTitle => Description;
// Indicates if the feed is available in the edit view
public bool AvailableInEditView => true;
// Method to load the feed items
public IEnumerable<IFeedItem> LoadItems()
{
var feedItems = new List<IFeedItem>();
// Populate the feed items using the static method GetCompanyList
foreach (var company in GetCompanyList())
{
feedItems.Add(new FeedItem
{
Key = company.Item2,
Value = company.Item1
});
}
return feedItems;
}
// Static method to get the company list
public static List<Tuple<string, string>> GetCompanyList()
{
return new List<Tuple<string, string>>
{
new("1", "Company A"),
new("2", "Company B"),
new("3", "Company C"),
};
}
}</code></pre>
<p>Next, we'll create a feed provider to manage and retrieve the available feeds. The <strong>FormFeedProvider</strong> class will be responsible for retrieving all instances of the <strong>IFeed</strong> interface. This allows Optimizely Forms to recognize and utilize any registered feeds.</p>
<pre class="language-csharp"><code>public class FormFeedProvider : IFeedProvider
{
public IEnumerable<IFeed> GetFeeds() => ServiceLocator.Current.GetAllInstances<IFeed>();
}
</code></pre>
<p>Now that our custom feed options are ready, you can use them in the Optimizely Forms admin UI. Follow these steps:</p>
<ol>
<li>Go to the Optimizely admin UI.</li>
<li>Create a new form or edit an existing one.</li>
<li>Add a selection element to the form.</li>
<li>In the choice items configuration for the selection element, you will see the custom feed option available.</li>
</ol>
<p>By following these steps, you will be able to dynamically populate choice items in the selection element using the custom feed.</p>
<p><img src="/link/103038fc15394fc996e4e368984a1a6a.aspx" width="1138" alt="" height="584" /></p>2024-08-12T07:41:30.0000000ZBlog postCreating Custom Actors for Optimizely Forms<p>Optimizely Forms is a powerful tool for creating web forms for various purposes such as registrations, job applications, surveys, etc. By default, the submitted data is stored and can be exported in different formats. Additionally, it has two other default actors: email and webhook, which are helpful for sending emails as well as webhooks.</p>
<p><img src="/link/694facfb8fec4f438fc7fd25d3f9ecac.aspx" width="747" alt="default actor preview" height="330" style="display: block; margin-left: auto; margin-right: auto;" /></p>
<p>However, sometimes clients want to use their own third-party development to integrate and save/post API data. This is where custom actors come into play. In this blog, we'll learn how to create custom actors and how to integrate them with APIs. Let's get started!</p>
<h1>Custom Actor Model</h1>
<p>To create a custom actor, we first need to create a class that inherits from IPostSubmissionActorModel and ICloneable. This class is used for the actor definition. In this example, we'll use two actor models in the dropdown list: one for Survey and another for Registration. You can use selection based on your requirements. Also, note that this model should be serializable.</p>
<pre class="language-csharp"><code>public class CustomActorModel : IPostSubmissionActorModel, ICloneable
{
[Display(Name = "Actor Type", Order = 101)]
[SelectOne(SelectionFactoryType = typeof(CustomActorTypeFactory))]
public virtual string ActorType { get; set; }
public object Clone()
{
return new CustomActorModel
{
ActorType = this.ActorType
};
}
private class CustomActorTypeFactory : ISelectionFactory
{
public IEnumerable<ISelectItem> GetSelections(ExtendedMetadata metadata)
{
return new ISelectItem[]
{
new SelectItem() { Text = "Survey API", Value = "1" },
new SelectItem() { Text = "Registration API", Value = "2" }
};
}
}
}</code></pre>
<h1>Editor Descriptor</h1>
<p>After creating the custom actor model, you need to inject this into the editor descriptor, which is used to render the grid UI. For this, you need to inherit an editor descriptor class using the Dojo widget CollectionEditor to render.</p>
<pre class="language-csharp"><code>[EditorDescriptorRegistration(TargetType = typeof(IEnumerable<CustomActorModel>), UIHint = "ConfigurableActorPropertyHint")]
public class CustomActorEditorDescriptor : CollectionEditorDescriptor<CustomActorModel>
{
public CustomActorEditorDescriptor()
{
ClientEditingClass = "epi-forms/contentediting/editors/CollectionEditor";
}
}</code></pre>
<h1>Property Definition</h1>
<p>After creating the editorial descriptor, you need to add a property definition for this actor model and inject the editorial hint from the editorial descriptor</p>
<pre class="language-csharp"><code>[EditorHint("ConfigurableActorPropertyHint")]
[PropertyDefinitionTypePlugIn(DisplayName = "ConfigurableActorProp")]
public class PropertyForDisplayingCustomActor : PropertyGenericList<CustomActorModel>
{
}</code></pre>
<h1>Custom Actor</h1>
<p>The final part involves implementing the custom actor, which inherits from PostSubmissionActorBase and implements the interface IUIPropertyCustomCollection. The PostSubmissionActorBase will override the Run method where our custom implementation will be done, and IUIPropertyCustomCollection will be used for the edit view user interface of configuring the actor model.<br /><br />Here, PropertyType will be our custom property type name.<br /><br />Below is a sample implementation of the Run method where we inject formDataRepository. We take the submitted data and find the data based on the element name. We create a custom method that will get the value based on the element name. As you can see, we can use CancelSubmit and ErrorMessage on the result response to prevent data submission as well.</p>
<pre class="language-csharp"><code>public class CustomActor : PostSubmissionActorBase, IUIPropertyCustomCollection
{
private readonly Injected<IFormDataRepository> _formDataRepository;
public override object Run(object input)
{
var result = new SubmissionActorResult { CancelSubmit = false, ErrorMessage = string.Empty };
var configs = (Model as IEnumerable<CustomActorModel>);
var submittedData = _formDataRepository.Service.TransformSubmissionDataWithFriendlyName(SubmissionData.Data, SubmissionFriendlyNameInfos, true).ToList();
if (configs.Any() && configs.Select(ap => ap.ActorType).FirstOrDefault() == "1") // Survey
{
// Get by form element name
var nameData = GetValueByKey(submittedData, "name");
// Implement your API
// If success, then just return result;
// If not successful, then:
result.CancelSubmit = true;
result.ErrorMessage = "your message";
}
else if (configs.Any() && configs.Select(ap => ap.ActorType).FirstOrDefault() == "2") // Registration
{
// Follow the previous comment
}
else
{
return result; // It'll call other actors if it has any;
}
return result;
}
public virtual Type PropertyType => typeof(PropertyForDisplayingCustomActor);
private string GetValueByKey(List<KeyValuePair<string, object>> list, string key)
{
var item = list.FirstOrDefault(kvp => kvp.Key == key);
return item.Value?.ToString();
}
}</code></pre>
<p>Now, if you run your project, you will see that the custom actor has been displayed in your form, and you can select any of them. Based on the selection, when you submit the form, your custom actor will be invoked.</p>
<p><img src="/link/0b694de8a6944486800afae501c99cc5.aspx" width="511" alt="custom actor preview" height="254" style="display: block; margin-left: auto; margin-right: auto;" /></p>2024-07-16T12:40:38.0000000ZBlog post